出现问题的原因: el-tree 中绑定的 data 被重新赋值了

我的解决方法:

给 el-tree组件设置default-expand-keys属性 ( :default-expanded-keys="defaultExpandedKeys" ),

在数据重新赋值之前,先将当前已经展开的节点id保存起来, 放到defaultExpandedKeys中

html代码如下:

<el-tree ref="tree" :data="treeItems" :props="navProps" node-key="id"
             :current-node-key="currentNodeKey" :default-expanded-keys="defaultExpandedKeys"
             @node-click="handleNavClick" :highlight-current="true"
             :expand-on-click-node="false">

js代码如下:

setDefaultExpandedKeys() {
    // 获取树形组件实例
   let treeCompInstance = this.$refs["tree"];
   let allNodes = treeCompInstance.store._getAllNodes();
   let defaultExpandedNodes = [];
   allNodes.forEach(node => {
        node.expanded && defaultExpandedNodes.push(node.data.id);
   });
   // console.log('defaultExpandedNodes', defaultExpandedNodes);
   this.defaultExpandedKeys = defaultExpandedNodes;
  }
},
mounted() {
   // 因为项目里面嵌套了好多层组件,采用eventBus的方式绑定&触发这个函数 
   this.$eventBus.$on('setDefaultExpandedKeys', this.setDefaultExpandedKeys);
},
beforeDestroy() {
   // 切记要在销毁之前将解除事件绑定,因为如果再次进入页面,还会绑定一个            
   // setDefaultExpandedKeys方法
   this.$eventBus.$off('setDefaultExpandedKeys', this.setDefaultExpandedKeys);
},



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

切记!!生命周期函数beforeUpdate 和 updated 里面千万不要对data中的数据进行赋值,会陷入循环!!!!!!

ps: 如果想要在beforeUpdate 对某个值赋值,可以把这个值放到data之外


将节点全部收缩功能:

expandAllNodes() {
   let allNodes = this.$refs["tree"].store._getAllNodes();
   allNodes.forEach(node => {
      node.expanded = false;
   });
},

 

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐