前端处理千条数据，表格+分页

基于el-table

特殊情况，后端不想干了，给了整整500多条数据，不分页，两眼一摸黑

理论上这种数据量还是要交给后端的  因为前端的处理会卡顿

但是还是得干！

首先 分析下数据是一个数组 包含500条数据，肯定不能直接渲染，要不然就想上面的图一样了

准备饿了么表单和分页：

    <el-table :data="tableData" border stripe style="width: 100%">
            ...
      </el-table>
   <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.pageNum"
        :page-sizes="[2, 3, 4, 5]"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="query.total"
      ></el-pagination>
  

 前端接收数据 ，计算当前页码的起始和结束位置，从 DataAll 中截取对应的数据，并将截取的数据赋值给 this.tableData，同时保留原始数据量以便显示总数据量

计算总页数。通过将总数据量除以每页显示的数据量并向下取整，再乘以每页显示的数据量并加1，得到总页数。

      
     // 取数据  
    const DataAll = res.data.data;  
     // 先置空 
     this.tableData = [];
      // 计算当前页码的起始位置
      const strlength = (this.query.pageNum - 1) * this.query.pageSize + 1;
      // 计算当前页码的结束位置
      const endlength = this.query.pageNum * this.query.pageSize;
      // 计算总页数
      const resStrLength = Math.floor((DataAll.length - 1) / this.query.pageSize)   
      * this.query.pageSize + 1;
      // 如果当前页码大于总页数，则将当前页码设置为总页数
      if (strlength > resStrLength) {  strlength = resStrLength;  }
      // 截取当前页码的数据
      this.tableData = DataAll.slice(strlength - 1, endlength);
      this.query.total = DataAll.length;

接下来分页就好弄了

   handleSizeChange(val) {
      this.query.pageSize = val;
    //刷新数据
      this.getData();
    },
    handleCurrentChange(val) {
      this.query.pageNum = val;
      this.getData();
    }

分页完成！