解决el-table树形数据量过大，导致卡顿问题

原因分析

element-ui里面的树状表格，当层级和数据过多的时候会出现点击展开和折叠的时候卡顿。数据量大概是 30 x 4 x 2 x 3 x 10 = 7200。

我以为是源码里的逻辑不好，debug源码，但是没有发现原因，后求助同事，得出是dom元素过多导致的。

一次性加载所有数据的时候，折叠的元素都已经加载了，只是样式为dispaly：none；

在点击展开的时候，改变display样式，因为元素位置变化，页面发生回流，且元素多，所以开销大。

所以采取懒加载的方式，将数据 一层层加上去。可以在点击展开的时候像后端请求，也可以从备份的全量数据里面找到对应层级。

这种处理方式会在展开过多时慢慢变得卡顿，所以需要提供一个逻辑，使得用户可以一键回到第一层，且卸载所有子节点。

解决代码

初始化表格代码：

this.tableDataCopy = res.resultValue || [] // 备份的全量数据
this.unload()


unload () {
 this.showTable = false
  // eslint-disable-next-line
  this.$nextTick(() => {
    this.showTable = true;
    this.tableLoading = false;
  })
  this.tableData = JSON.parse(JSON.stringify(this.tableDataCopy)).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)
},

文章来源element-ui el-table 大量数据的树状表格展开折叠卡顿解决