解决el-table数据量过大(上万条)加载页面直接卡死的问题（及复选框选择卡顿问题）

1：安装

 npm install umy-ui

2：引用

import { UTable, UTableColumn } from 'umy-ui';
import App from './App.vue';
 
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
      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>

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

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

如果列表中含有复选框，默认选中几千条数据，则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)