需要用到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)

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐