后端返回数据量过多页面卡死问题处理

后端返回的数据量很大，返回的数据还要做二次处理，无法做分页情况下前端需要做处理，否则会出现页面卡死问题，两种方式如下；

1.拆分数据然后使用定时器依次赋值：

// 使用定时器依次赋值
getData() {
   let twoDArr = this.dataHandleFun(this.Arr);
   // this.Arr为原始数据
   for (let i = 0; i < twoDArr.length; i++) {
      setTimeout(() => {
        this.arr = [...this.arr, ...twoDArr[i]];
      }, 1000 * i);
    }
 }

// 数据截取方法(一秒加载50条数据)
dataHandleFun(arr) {
  let i = 0
  let result = []
  while (i < arr.length) {
    result.push(arr.slice(i, i + 50))
    i = i + 50
  }
  return result
}

这种方式相当于分解了大批量数据，一秒加载50条数据，减少了浏览器压力。

2.在 el-table 表格中要展示大批量数据且无法做分页，返回的数据还要进行二次处理，并且表格中还有下拉框及多选框操作，加载大量数据渲染的时候要加载非常久有可能浏览器还会崩溃，可以使用组件 el-table-virtual-scroll

安装插件

npm i el-table-virtual-scroll -S

具体代码实现：

<!--若keyProp未设置或keyProp值不唯一，可能导致表格空数据或者滚动时渲染的数据断层、不连贯、滚动不了-->
<!-- ArrData 为要展示的表格数据 -->
<virtual-scroll
  :data="ArrData"
  :item-size="62"
  key-prop="id"
  @change="renderData => virtualList = renderData">
<el-table
  :data="virtualList"
   border
   :span-method="objectSpanMethod">
   ...
</el-table>
</virtual-scroll>

import VirtualScroll from 'el-table-virtual-scroll'
import { VirtualColumn } from 'el-table-virtual-scroll'

这样就实现了在表格中数据量过多页面卡死问题了，效果如下:

注意：表格中如果有合并单元格情况，需要添加配置 row-span-key 和 row-key ：

<virtual-scroll
  :data="ArrData"
  :item-size="62"
  key-prop="id"
  :row-span-key="getRowSpanKey"
  @change="renderData => virtualList = renderData">
    <el-table
      :data="virtualList"
       border
       :span-method="objectSpanMethod"
       row-key="id">
         ...
    </el-table>
</virtual-scroll>

方法：

getRowSpanKey(row) {
  return row.id
},
// 合并表格方法
objectSpanMethod({row, column, rowIndex, columnIndex}) {
  if (columnIndex === 0) {
    if (row.rowspan) {
      return {
        rowspan: row.rowspan,
        colspan: 1
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0
      }
    }
  }
}