解决el-table数据量过大(上万条)加载及复选框选择卡顿问题
el-table卡顿问题,el-table数据量过大,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)
更多推荐
已为社区贡献2条内容
所有评论(0)