出现问题的原因: 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
15
3
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45 1 年前
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 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐