在前端表格分页预处理
在前端表格分页预处理
需求背景
需要前端对表格数据进行预分页处理后进行新增，组件选用 elementUI 中的表格和分页，使用vue
常规的数据分页多由后端处理，通过不同的 pageSize 和 pageNum 进行控制分页，
前端对此数据处理其实也大同小异 实现原理如下
需要的数据
通常对一数组内的数据进行分页处理，我们需要根据原数组获得以下信息
- 总条数 total ，既数组长度；
- 每页条数和页数 pageSize 和 pageNum 这些参数可以直接通过分页组件传回，不同的使用场景也可以自行配置
- 页数 pages ，通过总条数和 pageSize 相除 取整向上取整即可；
处理思路
通过对原数组部分截取放到新数组来进行分页展示，我们可分为原数组和展示数组，
展示数组有两种情况，即 pageSize 和 total 正好整除和有余数两种，整除那么每页的数据刚好填满，出现余数需对最后页面进行处理；其本质是简单的数学问题;
代码思路如下，进行了简单的修改
Page () {
/******************信息预处理***********************/
//arr源数组
this.tableData = [];//展示数组
this.tablePage.total = this.arr.length;//条数
this.tablePage.pages = Math.ceil(arr.length / this.tablePage.pageSize);//页数
//数据处理
const pageNum = this.tablePage.pageNum;//页数
const pageSize = this.tablePage.pageSize;//每页几条
/*******************数据处理**********************/
if (this.arr.length !== 0) {
this.$nextTick(() => {
//预先判断当前是否为末页，如果为整页则每页展示数据量为 pageSize
if (this.tablePage.pages !== pageNum) {
//减一是对页数的处理，为单页时起始数为0位
for (let i = pageSize * (pageNum - 1); i < (pageNum * pageSize); i++) {
this.tableData.push(this.ruleForm.infoItemVos[i]);
}
} else {
//末页展示数据量为最后的余数，所以循环条件即数组的最后一位
for (let i = pageSize * (pageNum - 1); i < this.tablePage.total; i++) {
this.tableData.push(this.ruleForm.infoItemVos[i]);
}
}
})
}
},
以上处理片段条件为简单的一种，实现方法很多，但原理基本相同，都是对元数据部分截取处理,对数组进行数学操作，
比较需要注意的是在对表格内容进行编辑操作的时候，需要对数据深拷贝，相关的信息后面更新
