原因分析
element-ui里面的树状表格,当层级和数据过多的时候会出现点击展开和折叠的时候卡顿。数据量大概是 30 x 4 x 2 x 3 x 10 = 7200。
我以为是源码里的逻辑不好,debug源码,但是没有发现原因,后求助同事,得出是dom元素过多导致的。
一次性加载所有数据的时候,折叠的元素都已经加载了,只是样式为dispaly:none;
在点击展开的时候,改变display样式,因为元素位置变化,页面发生回流,且元素多,所以开销大。
所以采取懒加载的方式,将数据 一层层加上去。可以在点击展开的时候像后端请求,也可以从备份的全量数据里面找到对应层级。
这种处理方式会在展开过多时慢慢变得卡顿,所以需要提供一个逻辑,使得用户可以一键回到第一层,且卸载所有子节点。
解决代码
初始化表格代码:
this.tableDataCopy = res.resultValue || [] // 备份的全量数据
this.tableData = JSON.parse(JSON.stringify(res.resultValue)).map(item => {
// 展示数据
// hasChildren 表示需要展示一个箭头图标
item.hasChildren = item.list && item.list.length > 0
// 只展示一层
// 如果有children数据,会自动加载,就不是懒加载了,也可以配置tree-props里面的children为其他字段
item.list = null
// 记住层级关系
item.idList = [item.objId]
return item
})
懒加载代码:
// 展开
load (tree, treeNode, resolve) {
// 层级关系备份
const idCopy = JSON.parse(JSON.stringify(tree.idList))
// 查找下一层数据
let resolveArr = this.tableDataCopy
let id
// eslint-disable-next-line
while (id = tree.idList.shift()) {
const tarItem = resolveArr.find(item => item.objId === id)
resolveArr = tarItem.list
}
// 处理下一层数据的属性
resolveArr = JSON.parse(JSON.stringify(resolveArr))
resolveArr.forEach(item => {
item.hasChildren = item.list && item.list.length > 0
item.list = null
// 此处需要深拷贝,以防各个item的idList混乱
item.idList = JSON.parse(JSON.stringify(idCopy))
item.idList.push(item.objId)
})
// 渲染子节点
resolve(resolveArr)
},