解决el-table数据量过大加载卡顿问题

原因及现象

由于业务要求不可以使用分页的方式进行数据分割，而且数据量过大。使用el-table后页面卡顿，有时候网页直接崩溃。
这是因为数据量过多导致浏览器渲染过多的标签元素 导致DOM树占用内存较大 使得用户操作阻塞。
具体原理可参考： DOM性能瓶颈与Javascript性能优化.

解决办法

使用umy-ui组件及虚拟表格代替el-table。
具体使用方式如下：

1. 安装组件

 npm install umy-ui

2. 在main.js中引用

import { UTable, UTableColumn } from 'umy-ui';
Vue.component(UTable.name, UTable);
Vue.component(UTableColumn.name, UTableColumn);

3. 具体页面中使用

• 把el-table改成u-table。
• 把el-table-column改成u-table-column。
• u-table增加三个属性(必须)：use-virtual，row-height，height，表示启用虚拟列表。

实例：

<u-table
          :data="tableData"
          :header-cell-style="cellSty"
          use-virtual
          :row-height="30"
          :height="680"
          border
        >
          <u-table-column align="center" width="80px" type="index" label="序号" >
          </u-table-column>
          <u-table-column align="center" width="200px" prop="materialName" label="物料名称" >
          </u-table-column>
          <u-table-column align="center" width="200px" prop="materialCode" label="编码" >
          </u-table-column>
          <u-table-column align="center" width="200px" prop="outDate" label="出库日期" >
          </u-table-column>
          <u-table-column align="center" width="200px" prop="warehouse" label="存放位置" >
          </u-table-column>
          <u-table-column align="center" width="200px" prop="trashStatus" label="废物状态" >
          </u-table-column>
          <u-table-column align="center" width="200px" prop="specification" label="规格" >
          </u-table-column>
          <u-table-column align="center" width="200px" prop="quantity" label="数量" >
          </u-table-column>
          <u-table-column align="center" width="200px" prop="weight" label="重量" >
          </u-table-column>
          <u-table-column align="center" width="200px" prop="trashDirection" label="废物去向" >
          </u-table-column>
          <u-table-column align="center" width="200px" prop="keepHandle" label="贮存部门经办人签字" >
          </u-table-column>
          <u-table-column align="center" width="200px" prop="acceptHandle" label="废物运送部门/接收单位经办人（签字）" >
          </u-table-column>
        </u-table>

至此可以流畅的展示数据啦！