VUE应用element-UI组件实现动态分页功能
附上代码:<div class="itemProduct" v-for="(item,index) in productList.slice((currentPage-1)*pagesize, currentPage*pagesize)" :key="index"><router-link class="routerLink" to="/detail"><im...
附上代码:
<div class="itemProduct" v-for="(item,index) in productList.slice((currentPage-1)*pagesize, currentPage*pagesize)" :key="index">
<router-link class="routerLink" to="/detail"><img class="productImg" :src="item.goodsimg" alt=""></router-link>
<div class="productTip">
<div class="nameItem"> {{item.goodstitle}}</div>
<!-- <div class="sizeItem"> {{item.goodsid}}付款</div> -->
</div>
<div class="productTip">
<div class="productTitle"> {{item.goodscontent}}</div>
<div class="priceItem"> ¥{{item.goodsprice}}</div>
</div>
</div>
<div class="block">
<el-pagination
@size-change="handleSizeChange"//每页条数size
@current-change="handleCurrentChange"//当前页currentPage
layout="prev, pager, next"//设置layout
:page-size="6"//每页显示条目个数
:total="productList.length"//总条目数
>
</el-pagination>
</div>
data() {
return {
productList:[],
currentPage: 1,
pagesize: 6,
}
},
methods: {
//每页条数size
handleSizeChange: function (size) {
this.pagesize = size
},
//当前页currentPage
handleCurrentChange: function (currentPage) {
this.currentPage = currentPage
},
//请求数据
showMessage() {
this.$http
.get(url)
//成功的调用函数
.then(res => {
this.productList = res.data.object;
})
}
},
created() {
this.showMessage();
}
实现效果:
更多推荐
所有评论(0)