在开发过程中有时候会需要前端来处理数据进行分页,下面放的一段为开发项目中所用到的纯前端分页器事件配合element分页器使用
paging: {
//分页数据
size: 10,
currentPage: 1,
total: null,
},
pagine() {
//前端分页取前十条
this.tableData = this.commoditytable.slice(0, this.paging.size);
this.paging.total = this.commoditytable.length;
},
handleSizeChange(val) {
//前端分页控制条目数,
this.paging.currentPage = 1; //条目数发生更改时默认跳转第一页
this.paging.size = val;
this.pagine();
},
handleCurrentChange(val) {
//前端分页控制当前页数
this.tableData = this.commoditytable.slice(
(val - 1) * this.paging.size,
val * this.paging.size
);
this.paging.currentPage = val;
},
在分页配合后端数据进行分页的时候也发现了一个问题,切换超过所切换条目数最大页数的时候因为不同步会调用两次接口,下是网上大佬所用的解决方案再此做个记录方便自己以后查询
handleSizeChange(currentSize) {
this.paging.size = currentSize;
let pageMax = Math.ceil(this.paging.total / currentSize); //条数变化后的总页数
if (this.paging.currentPage > pageMax) {
//同步条数变化后的最大页数
this.paging.currentPage = pageMax;
}
this.couponlist();
},