1.发生场景。
人生无常，大肠包小肠。哪天后端童靴心情不好，贪图自身一时爽，在原本商同的列表接口里不按常理出牌，并未按分页参数给数据，而是一次性返回列表的所有数据，让你自行分页处理。你慌了吗？当然，正常情况下，不会发生此场景，不过万一发生了，作为专业的前端，咱们除了内心口吐芬芳外，一定得知道如何巧妙地处理它。或许你以前不知道如何化解此危机，不过相信看了这篇文章，在面对此情形的时候，你一定可以大声地说出：不慌！
2.使用情形。
2-1. 正常情况下,前后端分离的项目,对于表格类数据多的情况,都是由前端传当前页的页码和当前页的容量大小给后台,后台拿到这些字段进行分页返回数据(即前端动一页就发送一次请求拿到当前页的数据,这部分应用这里不再累述)。
2-2. 特殊情形下,后台不处理分页,只会在请求的时候一下将所有数据一起返回,这时候就需要前端同学自己处理分页了，这里简述为纯前端分页(本文针对的就是这种情形下的一种处理方法)。
3.处理思路。
前端发送请求拿到所有数据 → 对该数据进行处理 → 操作分页组件完成效果
4.核心方法。
这里的数据处理无疑就是对获取到的所有列表数据数组进行切割成所需长度的小数组。话不多说，直接上代码（均已注释）和效果图。
getNeedArr(array, size) { //获取所需指定长度分割的数组;参数1为用于分割的总数组,参数2为分割数组后每个小数组的长度
const length = array.length;
//判断不是数组，或者size没有设置，size小于1，就返回空数组
if (!length || !size || size < 1) {
return [];
}
//核心部分
let index = 0; //用来表示切割元素的范围start
let resIndex = 0; //用来递增表示输出数组的下标
//根据length和size算出输出数组的长度，并且创建它。
let result = new Array(Math.ceil(length / size));
//进行循环
while (index < length) {
//循环过程中设置result[0]和result[1]的值。该值根据array.slice切割得到。
result[resIndex++] = array.slice(index, (index += size));
}
//输出新数组
return result;
},
5.结合组件库模拟真实环境开发效果。
<template>
<div class="home">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="id" label="ID" width="180"></el-table-column>
<el-table-column prop="phone" label="电话" width="180"></el-table-column>
<el-table-column prop="userName" label="用户名"></el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[20, 30, 50, 100]"
:page-size="20"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
</template>
<script>
import * as API from "@/api/pageRequest/home.js";
export default {
name: "Home",
data() {
return {
currentPage: 1, //当前页
total: null, //总数
list: [], //后台返回的所有结果
tableData: [], //当前页码的表格数据
pageSize: 20, //当前页容量
};
},
methods: {
handleSizeChange(val) { //切换每页条数容量
this.currentPage = 1;
this.pageSize = val;
this.getList();
},
handleCurrentChange(val) { //切换当前页
this.currentPage = val;
this.getList();
},
getList() { //自己封装的axios请求,获取数据
API.getList().then((res) => {
this.list = res.data.data; //总数组
this.total = res.data.data.length; //总条数
this.tableData = this.getNeedArr(this.list,this.pageSize)[this.currentPage - 1] //当前页的表格数据
console.log(this.tableData);
});
},
getNeedArr(array, size) { //获取所需指定长度分割的数组;参数1为用于分割的总数组,参数2为分割数组后每个小数组的长度
const length = array.length;
//判断不是数组，或者size没有设置，size小于1，就返回空数组
if (!length || !size || size < 1) {
return [];
}
//核心部分
let index = 0; //用来表示切割元素的范围start
let resIndex = 0; //用来递增表示输出数组的下标
//根据length和size算出输出数组的长度，并且创建它。
let result = new Array(Math.ceil(length / size));
//进行循环
while (index < length) {
//循环过程中设置result[0]和result[1]的值。该值根据array.slice切割得到。
result[resIndex++] = array.slice(index, (index += size));
}
//输出新数组
return result;
},
},
created() {
this.getList();
},
};
</script>
6.总结。
童靴，学会了吗？再次面对无理的后端同学不配合列表分页的时候，你还慌吗?相信你现在的答案自然是不慌！天空飘来五个字--那都不是事。
