element ui table表格数中的树形结构懒加载，增加后数据不同步更新问题_力软框架树形数据量大加载缓慢

主要内容

1.解决的问题

使用table表格自带的树形结构做组织机构，但是当数据量太多的时候，存在两个问题1.是数据加载慢 ，渲染到表格的时候很卡顿，无法进行后续的操作 2. 是使用懒加载后，进行添加等操作不能实时更新

2.解决办法

2.1 table 树形结构懒加载

针对第一个问题： 当数据量太大的时候，可以使用懒加载，具体就是只有当我们点击某个父节点的时候，它才会加载数据进行渲染，否则的话是没有数据的。这样就只是再每次点击的时候加载，数据量不会一下子全部加载，解决问题1。直接上代码吧

 <tables
      v-loading="isloading"
      v-if="refreshTable"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      :tableData="tableData"
      row-key="orgunitId"
      :load="load"
      lazy
      :tableColumn="tableColumn"
      ref="deptListRef"
      :singleHiden="true"
      :indent="16"
      :height="hei"
      class="DeptTable"
      size="mini"
      v-perm="'020100'"
   
       empty-text = " "
    >
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

树形数据渲染需要两个字段 tree-props 和 row-key tree-props 用来更改数据字段，默认数据中包含children代表渲染树形数据，haschildren 代表是否展示那个下拉箭头，如图所示

为数据中haschildren为true代表有 false代表无，树形数据渲染前的处理，我把整个数据的children都删除了 只剩下一个根机构，这样渲染的话不会卡，因为只剩下一个数据了

 newarr.map(item => {
        if (item.children.length > 0) {
          delete item.children
          item.hasChildren = true
        } else {
          // delete item.childrenaddDeptList
          item.hasChildren = false
        }
      })
1
2
3
4
5
6
7
8
9

每次遍历看看有没有children属性，并且length>0 代表有子数据，就把haschildren置为true ，并且删除它的children，否则就置为false。
开始懒加载，需要两个属性 load和lazy ，load代表懒加载的函数，我这里是这样来定义懒加载的

 load(tree, treeNode, resolve) {
      // 被懒加载的节点 键值对是id 和children
      // console.log(this.$refs.deptListRef.$refs.tableRef.store.states.lazyTreeNodeMap);
      // this.map = new Map()
      this.map.set(tree.orgunitId, { tree, treeNode, resolve })
      // this.hasLoad = true
      // this.currentLoadTreeData = tree
      // this.resolveObj = resolve
      resolve(this.recursion(this.arr, tree.orgunitId))
      // alert('a')
      this.children = []
    },

    recursion(arr, id) {
      let newArrVal1 = JSON.parse(JSON.stringify(arr))
      //遍历数据 拿到当前树节点的所有子节点
      newArrVal1.forEach(item => {
        if (item.parentId == id) {
          if (item.children && item.children.length > 0) {
            this.children.push(item)
            delete item.children
            item.hasChildren = true
          } else {
            delete item.children
            item.hasChildren = false
            this.children.push(item)
          }
        } 
        else {
          if (item.children !== null && item.children != undefined && item.children.length > 0) {
            this.recursion(item.children, id)
          }
        }
      })
      return this.children
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

先说load函数吧，tree,treenode,resolve 3个参数，tree代表当前点击的节点，会返回它的数据，resolve代表懒加载，是封装好的 直接用就行。里面传当前父节点的子数据，是数组的格式
recursion函数的作用就是找到这个父节点的所有子节点，并以数组的形式返回。细节我就不说了，看代码就可以看懂。按照上面操作，问题一就可以解决。

2.2 懒加载数据不实时更新

针对问题2 可以在每次更新数据的时候，把当前操作节点的父节点重新懒加载一次，这样就会实时更新数据了。这个办法我参考的地址在这里，可以去看看点击这里

代码也跟他的一样，我自己贴出来

refreshLoadTree(lazyTreeNodeMap, map, parentId) {
        if(map.get(parentId)) {
          // alert('2')
          const {tree, treeNode, resolve} = map.get(parentId)
           this.$set(lazyTreeNodeMap, parentId, [] )
          if(tree) {
              this.load(tree, treeNode, resolve)
          }
        }
    },
1
2
3
4
5
6
7
8
9
10

然后有一个坑，就是函数执行的顺序，异步是在同步的后面的，所以在重新拿数据的时候，最好用async await 模仿一下同步，等待这个执行完，再执行refreshLoadTree

 await this.getDeptList()
                this.refreshLoadTree(this.$refs.deptListRef.$refs.tableRef.store.states.lazyTreeNodeMap, this.map, this.loadParentId)
1
2

好了就这些，有问题一起讨论哈！