VUE+elementUI前端分页
前端代码:<div class="exam_item" v-for="item in dataShow" :key="item.id"><div>{{item.name}}</div></div>JS代码:data() {return {tableData: [],totalPageData: [], // 分页数据(全部数据已经分好页)pageNu
·
前端代码:
<div class="exam_item" v-for="item in dataShow" :key="item.id">
<div>{{item.name}}</div>
</div>
JS代码:
data() {
return {
tableData: [],
totalPageData: [], // 分页数据(全部数据已经分好页)
pageNum: 1, // 共几页
pageSize: 5, // 每页显示数量
currentPage: 1, // 当前显示页码
total: 1, // 总共多少条数据
dataShow: [], // 当前页要显示的数据
}
}
// 获取接口数据
getDataList() {
dataList().then((res) => {
this.tableData = res.data.data;
this.total = res.data.data.length;
this.calcPageData();
});
},
// 计算页数的方法
calcPageData() {
// 计算页数,根据后台数据的条数和每页要显示的数量算出一共多少页,得0时设为1
if (this.tableData.length > 1) {
this.pageNum = Math.ceil(this.tableData.length / this.pageSize) || 1;
// console.log("总页数:" + this.pageNum);
}
//数据分组
for (let i = 0; i < this.pageNum; i++) {
// 每页相当于一个数据,例如:[[],[],[]]
// 根据每页显示数量,将后台的数据分割到每一页,假设pageSize为5,则第一也为1-5条slice(0,5),slice(5,10)...
this.totalPageData[i] = this.tableData.slice(
this.pageSize * i,
this.pageSize * (i + 1)
);
}
// 获取到数据后显示第一页内容,数组下标是从0开始的,这里一定 要减去1,不然会丢失一组数据
this.dataShow = this.totalPageData[this.currentPage - 1];
},
// 分页
handleSizeChange(val) {
this.pageSize = val;
// 重新计算页数并分组
this.calcPageData();
},
handleCurrentChange(val) {
this.currentPage = val;
// 注意数组是从0开始,页码别忘了减去1
this.dataShow = this.totalPageData[val - 1];
this.calcPageData();
},
更多推荐
所有评论(0)