前端分页
要将你的goods数组与ElementUI的分页效果联系起来，你需要做以下调整：
- 首先，根据获取到的商品数据，计算总的商品数量
totalGoods，这样可以在分页组件中使用：
1
2
3
4
5
6
7
8
| data() {
return {
goods: [],
totalGoods: 0,
pageSize: 10,
currentPage: 1,
};
},
|
- 在获取商品数据后，更新
goods数组并设置totalGoods的值：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| methods: {
getGoods() {
this.$http.get('/queryGoods').then(res => {
console.log(res)
this.goods = res.data.map(good => ({
goodsDescription: good.goodsDescription,
goodsImage: good.goodsImage,
goodsInventory: good.goodsInventory,
goodsName: good.goodsName,
goodsPrice: good.goodsPrice,
goodsStatus: good.goodsStatus,
supplierId: good.supplierId,
tag: good.tag
}));
this.totalGoods = this.goods.length;
});
},
},
|
- 修改模板中的循环，将原来的
v-for="(good, index) in goods"改为v-for="(good, index) in currentGoods"，并添加分页组件：
1
2
3
4
5
6
7
8
9
| <div class="grid-item" v-for="(good, index) in currentGoods" :key="index">
</div>
<el-pagination
layout="prev, pager, next"
:total="totalGoods"
:page-size="pageSize"
@current-change="handlePageChange"
></el-pagination>
|
- 添加计算属性
currentGoods，用于计算当前页显示的商品数据：
1
2
3
4
5
6
7
| computed: {
currentGoods() {
const startIndex = (this.currentPage - 1) * this.pageSize;
const endIndex = startIndex + this.pageSize;
return this.goods.slice(startIndex, endIndex);
},
},
|
- 实现处理页码变化的方法
handlePageChange，用于更新当前页码：
1
2
3
4
5
| methods: {
handlePageChange(currentPage) {
this.currentPage = currentPage;
},
},
|
- 在
mounted钩子中调用getGoods方法获取商品数据：
1
2
3
| mounted() {
this.getGoods();
},
|
通过以上步骤，你可以将获取到的商品数据与分页效果结合起来，实现页面数据过多时进行分页显示。希朝上述方法能帮助到你。
下面是grid布局
完整代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <template>
<div class="grid-container">
<div class="grid-item" v-for="(service, index) in filteredServices" :key="index">
</div>
</div>
</template>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 20px;
padding-left: 50px;
margin-top: 38px;
}
.grid-item {
}
</style>
|
