基于el-table
特殊情况,后端不想干了,给了整整500多条数据,不分页,两眼一摸黑
理论上这种数据量还是要交给后端的 因为前端的处理会卡顿
但是还是得干!
首先 分析下数据是一个数组 包含500条数据,肯定不能直接渲染,要不然就想上面的图一样了
准备饿了么表单和分页:
<el-table :data="tableData" border stripe style="width: 100%">
...
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="query.pageNum"
:page-sizes="[2, 3, 4, 5]"
:page-size="query.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="query.total"
></el-pagination>
前端接收数据 ,计算当前页码的起始和结束位置,从 DataAll 中截取对应的数据,并将截取的数据赋值给 this.tableData,同时保留原始数据量以便显示总数据量
计算总页数。通过将总数据量除以每页显示的数据量并向下取整,再乘以每页显示的数据量并加1,得到总页数。
// 取数据
const DataAll = res.data.data;
// 先置空
this.tableData = [];
// 计算当前页码的起始位置
const strlength = (this.query.pageNum - 1) * this.query.pageSize + 1;
// 计算当前页码的结束位置
const endlength = this.query.pageNum * this.query.pageSize;
// 计算总页数
const resStrLength = Math.floor((DataAll.length - 1) / this.query.pageSize)
* this.query.pageSize + 1;
// 如果当前页码大于总页数,则将当前页码设置为总页数
if (strlength > resStrLength) { strlength = resStrLength; }
// 截取当前页码的数据
this.tableData = DataAll.slice(strlength - 1, endlength);
this.query.total = DataAll.length;
接下来分页就好弄了
handleSizeChange(val) {
this.query.pageSize = val;
//刷新数据
this.getData();
},
handleCurrentChange(val) {
this.query.pageNum = val;
this.getData();
}
分页完成!