问题形容
有这样一个业务场景：对于某个表格展现数据而言，这个表格的数据在30~60条之间，不会超过某个数量不会太多。
后端说：我一次性返回给你所有的数据，因为产品说必须要做分页，你就本人做分页吧，也不必传我分页参数了。行吧？
前端：行，那我拿到所有的数据，依据分页参数，本人做一个截取展现呗
效果图
效果图就是失常的分页成果
代码附上
演示的话，间接复制粘贴即可。正文中简述了，代码思路
<template> <div class="box"> <el-table height="240" :data="showTableData" border style="width: 100%"> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="age" label="年龄" width="180"></el-table-column> <el-table-column prop="home" label="他乡"></el-table-column> </el-table> <el-pagination layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageIndex" :page-size="pageSize" :page-sizes="[2, 4, 6, 10]" :total="total" > </el-pagination> </div></template><script>export default { data() { return { pageIndex: 1, // 第几页 pageSize: 4, // 每页几条数据 total: 0, // 总条目数 allTableData: [], // 所有的数据 showTableData: [], // 以后展现的数据 }; }, mounted() { setTimeout(() => { // 1. 模仿发申请获取所有的数据 let apiAllTableData = [ { name: "孙悟空", age: 500, home: "花果山水帘洞", }, { name: "猪八戒", age: 88, home: "高老庄", }, { name: "沙和尚", age: 1000, home: "通天河", }, { name: "唐僧", age: 9999, home: "东土大唐", }, { name: "白龙马", age: 12, home: "东海", }, { name: "观音菩萨", age: 18, home: "南海", }, { name: "玉皇大帝", age: 123456789, home: "凌霄宝殿", }, { name: "如来佛祖", age: 9999999.999, home: "迦毗罗卫国", }, ]; // 2. 存一份所有的数据 this.allTableData = apiAllTableData; // 3. 获取总条目数 this.total = this.allTableData.length; // 4. 依据以后是第几页、每页展现几条，去截取须要展现的数据 this.getShowTableData(); }, 1000); }, methods: { getShowTableData() { // 5. 获取截取开始索引 let begin = (this.pageIndex - 1) * this.pageSize; // 6. 获取截取完结索引 let end = this.pageIndex * this.pageSize; // 7. 通过索引去截取，从而展现 this.showTableData = this.allTableData.slice(begin, end); }, // 8. 页数扭转，从新截取 handleCurrentChange(val) { this.pageIndex = val; this.getShowTableData(); }, // 9. 条目数扭转，也从新截取 handleSizeChange(val) { this.pageIndex = 1; this.pageSize = val; this.getShowTableData(); }, },};</script>其实对于某些数据量比拟少的表格展现业务场景，齐全能够不分页，或者由前端做截取分页。