前端解决后端返回数据量过多且无法做分页导致页面卡死问题

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

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-virtual-scroll

在 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
      }
    }
  }
}

以上就是关于前端解决后端返回数据量过多且无法做分页导致页面卡死问题的方法，希望对大家有用。