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

关键字:element-ui, el-table ,大量数据,树状表格,展开折叠,卡顿,懒加载

遇到难题:

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

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

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

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

参考:https://blog.csdn.net/qq_34893429/article/details/61425120

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

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

初始化表格代码:

   this.tableDataCopy = res.data || [] // 备份的全量数据
      this.tableData = JSON.parse(JSON.stringify(res.data)).map(item => { // 展示数据
        // hasChildren 表示需要展示一个箭头图标
        item.hasChildren = item.children && item.children.length > 0
        // 只展示一层
        // 如果有children数据,会自动加载,就不是懒加载了,也可以配置tree-props里面的children为其他字段
        item.children = null
        // 记住层级关系
        item.idList = [item.id]
        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.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的idList混乱
        item.idList = JSON.parse(JSON.stringify(idCopy))
        item.idList.push(item.id)
      })

      // 标识已经加载子节点
      tree.loadedChildren = true

      // 渲染子节点
      resolve(resolveArr)
    }

使表格回到只有一层的状态

   unload () {
      this.showTable = false
      // eslint-disable-next-line
      this.$nextTick(() => this.showTable = true)
      this.tableData = JSON.parse(JSON.stringify(this.tableDataCopy)).map(item => {
        // hasChildren 表示需要展示一个箭头图标
        item.hasChildren = item.children && item.children.length > 0
        // 只展示一层
        item.children = null
        // 记住层级关系
        item.idList = [item.id]
        return item
      })
    },

模板代码

<el-table
        v-if="showTable"
        :data="tableData"
        row-key="id"
        border
        lazy
        max-height="540"
        :load="load"
        ref="table"
      >
        <el-table-column prop="statisticTime" label="日期" min-width="220">
        </el-table-column>
      </el-table>