el tree 节点折叠展开动态控制

问题

因为这里的应用场景是可以用户配置树和共享树，其它用户可以访问树，问题在于如果树的节点太多展开就会显得很长，反过来如果折叠的状态唯一，那么用户就可能无法看到自己想优先操作的节点，故在保存树目录到服务器的同时需要将折叠的状态值也保存到树中

思路

el-tree有三个属性

• node-expand 节点被展开时触发的事件
• node-collapse节点被折叠时触发的事件
• default-expanded-keys 默认展开的节点的 key 的数组

通过node-expand来监听节点的折叠状态，通过default-expanded-keys来初始化折叠状态

实现

发现已经有人分享了这个解决思路,感兴趣的可以查看这篇文章。
核心就是管理好default-expanded-keys的数据即可。

<el-tree
      id="el-tree"
      show-checkbox
      :data="setTree"
      :props="defaultProps"
      node-key="guid"
      ref="tree"
      :default-expanded-keys="expandData"
      @node-expand="nodeExpand"
      @node-collapse="nodeCollapse"
      draggable
    >
</el-tree> 
...
data() {
    return {
     expandData: []
    }
}
... 
methods: {
    nodeExpand(data) {
      this.expandData = [...this.expandData , data.guid];
    },
    nodeCollapse(data) {
      this.expandData .filter((item) => item !== data.guid);
    }
}