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

这篇具有很好参考价值的文章主要介绍了解决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)文章来源地址https://www.toymoban.com/news/detail-525605.html

到了这里，关于解决el-table数据量过大(上万条)加载及复选框选择卡顿问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！