前端vue、element-ui，手搓一个分页

写需求时遇到的一个事情，自己手搓分页功能，平常都是后台接口做的处理，这次要自己手搓了，特此记录一下，话不多说，直接上。

<el-pagination
     :page-size="pageSize"
     :current-page="currentPage"
     layout="total, prev, pager, next"
     :total="total"
     @size-change="handleSizeChange"
     @current-change="handleCurrentChange" />

用element的分页组件，写一个分页器，然后还需要一个真实的data数据源gridData，以及一个分页的数据源tableData，接下来就是做分页处理了。

this.total = this.gridData.length; // 总条数
this.tableData = this.getNeedArr(this.gridData, this.pageSize)[this.currentPage - 1]; // 当前页的表格数据

先获取一下每页的数据，因为gridData的数据从localStorage获取的，涉及到一些东西这边就不做展示了，接下来分页的数据处理。

// 前端处理分页
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算出输出数组的长度，并且创建它。
     const 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;
},

好了，到这一步，就结束了，分页搞定，剩下的就是每次获取gridData真实数据（总数据）的时候调用一下第二个图的获取一下分页的数据，以及每次分页的事件调用一下，就可以了。