昨天没搞会的今天搞明白了
背景:
el-tree有默认选中及展开的功能,在编辑成员时传参,选中及展开,但是在新建成员时,需要都折叠以及全部取消选中,在昨天的文章描述了取消选中,今天来看看折叠。
取消选中及其他用到的el-tree功能
解决思路:
用this.$refs.child可以访问到子组件,再在此基础上访问$refs.tree可以访问到当前的el-tree,控制台打印tree:
可以见到root属性保存了当前树的节点信息,childNodes为子节点的数组,expanded属性保存了当前节点是否展开
所以我就递归遍历,更改所有expanded属性为false,代码如下
//调用函数
this.closeExpand(this.$refs.child.$refs.tree.root);
//函数体
closeExpand(node) { // 树折叠
if (node instanceof Array) {
node.forEach((item) => {
// eslint-disable-next-line no-param-reassign
item.expanded = false;
this.closeExpand(item);
});
} else {
// eslint-disable-next-line no-param-reassign
node.expanded = false;
this.closeExpand(node.childNodes);
}
},