在前端表格分页预处理

在前端表格分页预处理

需求背景

​ 需要前端对表格数据进行预分页处理后进行新增，组件选用 elementUI 中的表格和分页，使用vue

​ 常规的数据分页多由后端处理，通过不同的 pageSize 和 pageNum 进行控制分页，

​ 前端对此数据处理其实也大同小异 实现原理如下

需要的数据

​ 通常对一数组内的数据进行分页处理，我们需要根据原数组获得以下信息

1. 总条数 total ，既数组长度；
2. 每页条数和页数 pageSize 和 pageNum 这些参数可以直接通过分页组件传回，不同的使用场景也可以自行配置
3. 页数 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]);
            }
          }
        })
      }
    },

以上处理片段条件为简单的一种，实现方法很多，但原理基本相同，都是对元数据部分截取处理,对数组进行数学操作，

比较需要注意的是在对表格内容进行编辑操作的时候，需要对数据深拷贝，相关的信息后面更新