需求:点击取消按钮时,可以将展开的节点全部折叠。
具体解决方案:
cancelSelect() {
this.treeStatus = false
//改变每个节点的状态
this.changeTreeNodeStatus(this.$refs.tree.store.root);
//注意:其中的tree=> ref="tree"
},
//改变节点的状态
changeTreeNodeStatus(node) {
node.expanded = this.treeStatus;
for (let i = 0; i < node.childNodes.length; i++) {
//改变节点的自身expanded状态
node.childNodes[i].expanded = this.treeStatus;
if (node.childNodes[i].childNodes.length > 0) {
this.changeTreeNodeStatus(node.childNodes[i]);
}
}
}
需要注意的是设置ref="tree"
<el-button type="primary" plain="" size="mini" @click="cancelSelect">取消</el-button>
<el-tree :data="treeData" :props="defaultProps" icon-class="el-icon-caret-right" :highlight-current="true"
ref="tree" :filter-node-method="filterNode" @node-click="handleNodeClick" node-key="id">
<template #default="{ node, data }">
<span class="tree-node">
<i class="el-icon-folder"></i>
{{ node.label}}
</span>
</template>
</el-tree>