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"><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();

}

实现效果：