element中Tree组件更新后不自动收起

element中Tree组件更新后不自动收起

在使用element的Tree组件过程中，可能会遇到这样的需求，点击某个节点对树进行节点的增加、删除或者修改，树的节点更新后，会重新加载，所以展开的节点会重新关闭，但频繁的点击展开会增加操作负担，那么如何在树结构更新后不收起已经展开的节点呢？

官方文档

查找element官方文档后，发现有Tree有这样的属性和方法可以帮助解决问题：

1. default-expanded-keys ，默认展开的节点的 key 的数组；
2. getNode， 根据 data 或者 key 拿到 Tree 组件中的 node；

解决思路

给el-tree设置默认展开节点，记录每次树更新前的展开节点，编辑新增或删除后，重新渲染时设置默认展开节点，即可实现树重新渲染后不收起的效果。

具体实现

1. 在el-tree组件中设置:default-expanded-keys="expandedList",expandedList为默认展开节点的node-key数组；
2. 写函数寻找所有展开节点，函数实现如下：

findExpandedNode() { // 寻找所有展开的节点id
     const list = []
     this.allList.forEach(element => {
       if (this.$refs.SlotMenuList.getNode(element).expanded === true) {
         list.push(element)
       }
     })
     return list
   }

SlotMenuList为设置的el-tree的ref名称，allList为树结构中包含所有节点node-key的数组，getNode方法根据key获取节点信息，找到expanded为true即状态为展开的节点，将其放入数组中。

补充获取树结构中全部节点的函数

findChildren(data) { // 寻找该分组下所有分组id
      let list = []
      if (data.children && data.children.length > 0) {
        list.push(data.id)
        data.children.forEach(element => {
          const newList = this.findChildren(element)
          list = list.concat(newList)
        })
      } else {
        list.push(data.id)
      }
      return list
    }

该示例中node-key为id，故寻找树结构中所有节点时将id放入数组中

3. 在不希望收起树结构的位置调用获取展开节点的函数，为树结构设置默认展开节点。

this.expandedList = this.findExpandedNode()

总结

经过这样，就可以实现树结构重新渲染后不收起的效果啦~~~