el-table
树形table 10w+数据每次点击要十几秒 懒加载解决点击卡顿
//vue 表头要增加lazy :load="load"
<el-table
lazy
stripe
border
ref="table"
row-key="id"
:load="load"
:data="tableData"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
style="width: 100%"
:height="tableHeight"
>
请求树
handleQuery() {
//GetTree为数据接口
GetTree().then(res => {
if (res.errorCode === "000000") {
this.total = res.data.length
//备份所有的数据
const list = res.data || [];
const listFun = (ele, level) => {
//因为系统最多能添加五级,增加了叶子节点
if (level >= 5) {
ele.leafFlag = true;
} else {
ele.leafFlag = false;
}
if (ele.children && ele.children.length > 0) {
level = level + 1;
ele.children.map((childEle) => {
listFun(childEle, level);
});
} else {
delete ele.children;
}
};
list.map((element) => {
let level = 1;
listFun(element, level);
});
this.tableDataCopy = list;
const listCopy = JSON.parse(JSON.stringify(list));
//初始化表格展示一级类目
this.tableData = listCopy.map((item) => {
item.hasChildren = item.children && item.children.length > 0;
item.children = null;
item.levelIdList = [item.id];
return item;
});
}
})
},
load (row, treeNode, resolve) {
// 层级关系备份
const idCopy = JSON.parse(JSON.stringify(row.levelIdList))
// 查找下一层数据
let resolveArr = this.tableDataCopy
let id
// eslint-disable-next-line
while (id = row.levelIdList.shift()) {
const tarItem = resolveArr.find(item => item.id === id);
tarItem.loadedChildren = true
resolveArr = tarItem.children
}
// 处理下一层数据的属性
resolveArr = JSON.parse(JSON.stringify(resolveArr))
resolveArr.forEach(item => {
item.hasChildren = item.children && item.children.length > 0;
item.children = null;
// 此处需要深拷贝,以防各个item的levelIdList混乱
item.levelIdList = JSON.parse(JSON.stringify(idCopy))
item.levelIdList.push(item.id)
})
// 标识已经加载子节点
row.loadedChildren = true
// 渲染子节点
resolve(resolveArr)
},
无需等待 点击一下就出来了