Element 树形组件,数据刷新以后原本展开的节点被收缩的问题
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
出现问题的原因: 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 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)