需要用到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，數(shù)據(jù)量加載卡頓問題。
把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>?如此一來便可流暢加載上萬條數(shù)據(jù)了。
2，復選框默認選擇，全選卡頓問題。
如果列表中含有復選框，默認選中幾千條數(shù)據(jù)，則u-table還需增加兩個屬性：big-data-checkbox和row-key。
默認選擇由toggleRowSelection改成partRowSelections。文章來源：http://www.zghlxwxcb.cn/news/detail-525605.html
<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官網(wǎng)：umy-ui開發(fā)文檔 - 為開發(fā)者準備的基于 Vue 2.0 的桌面端組件庫，完美解決表格萬級數(shù)據(jù)渲染卡頓問題 (umyui.com)文章來源地址http://www.zghlxwxcb.cn/news/detail-525605.html
到了這里，關(guān)于解決el-table數(shù)據(jù)量過大(上萬條)加載及復選框選擇卡頓問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
