解决el-table数据量过大(上万条)加载及复选框选择卡顿问题

需要用到umy-ui组件及虚拟表格。

安装：

 npm install umy-ui

引用：

import { UTable, UTableColumn } from 'umy-ui';
import App from './App.vue';

Vue.component(UTable.name, UTable);
Vue.component(UTableColumn.name, UTableColumn);

1，数据量加载卡顿问题。

把el-table改成u-table。

把el-table-column改成u-table-column。

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

<u-table
      v-loading="loading"
      ref="billtable"
      :data="list"
       use-virtual
      :row-height="30"
      :height="600"
       @selection-change="handleSelectionChange"
    >

     <u-table-column
        type="selection"
        width="50"
        align="center"
      />
      
      <u-table-column
        label="订单号"
        align="center"
        prop="orderNo"
      />
</u-table>

如此一来便可流畅加载上万条数据了。

2，复选框默认选择，全选卡顿问题。

如果列表中含有复选框，默认选中几千条数据，则u-table还需增加两个属性：big-data-checkbox和row-key。

默认选择由toggleRowSelection改成partRowSelections。

<u-table
      v-loading="loading"
      ref="billtable"
      :data="list"
       use-virtual
      :row-height="30"
      :height="600"
      :big-data-checkbox="true"
      row-key="orderNo"
       @selection-change="handleSelectionChange"
    >

     <u-table-column
        type="selection"
        width="50"
        align="center"
      />
      
      <u-table-column
        label="订单号"
        align="center"
        prop="orderNo"
      />
</u-table>

复选框默认选择用此方法:  
this.$refs.billtable.partRowSelections(this.list.filter((item)=>item.isBill==true), true)

umy-ui官网：umy-ui开发文档 - 为开发者准备的基于 Vue 2.0 的桌面端组件库，完美解决表格万级数据渲染卡顿问题 (umyui.com)