VUE应用element-UI组件实现动态分页功能

附上代码：

{{item.goodstitle}}

{{item.goodscontent}}

￥{{item.goodsprice}}

@size-change="handleSizeChange"//每页条数size

@current-change="handleCurrentChange"//当前页currentPage

layout="prev, pager, next"//设置layout

:page-size="6"//每页显示条目个数

:total="productList.length"//总条目数

>

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

}

实现效果：