element （Tree 树形控件）(数据更新后取消默认收起)

场景

当使用 el-tree 新增文件夹时，组件默认会全部收起，重复点击会影响体验效果，于是开始了碰壁了，解决后在此分析。

分析

• 当 data 数据发现改变的时候重新渲染会默认收起树形图

解决方案

<el-tree
	:default-expanded-keys="defaultExpandedKeys" 默认展开的节点的 key 的数组    Array
	ref="tree" 										
	:data="data"
	node-key="directoryId"						 其值为节点数据中的一个字段名，该字段在整棵树中是唯一的
>
></el-tree>


注意
	// main.js
	Vue.prototype.$eventBus = new Vue()


mounted() {
    
    
   // 因为项目里面嵌套了好多层组件，采用eventBus的方式绑定&触发这个函数 
   this.$eventBus.$on('setDefaultExpandedKeys', this.setDefaultExpandedKeys);
},

beforeDestroy() {
    
    
   // 切记要在销毁之前将解除事件绑定，因为如果再次进入页面，还会绑定一个
   this.$eventBus.$off('setDefaultExpandedKeys', this.setDefaultExpandedKeys);
},

methods:{
    
    
	setDefaultExpandedKeys() {
    
    
	    // 获取树形组件实例
	   let treeCompInstance = this.$refs["tree"];
	   let allNodes = treeCompInstance.store._getAllNodes();
	   let defaultExpandedNodes = [];
	   allNodes.forEach(node => {
    
    
	   
///
注意
node.data.directoryId  此处的**directoryId**不是固定的 

看下图 根据实际情况替换该 id 值  与上面绑定的 node-key 呼应
///

	        node.expanded && defaultExpandedNodes.push(node.data.directoryId  );
	   });
	   this.defaultExpandedKeys = defaultExpandedNodes;
	},
}

最后

在el-tree 绑定的data数据重新赋值之前调用：
this.$eventBus.$emit('setDefaultExpandedKeys');

下图是我点击确认添加按钮的时间，此处仅供参考