html
<el-tree
style='height: 70vh'
:data="data"
:props="defaultProps"
node-key="id"
@node-click="handleNodeClick"
:highlight-current="true"
:filter-node-method="filterNode"
ref="tree"
:key="treeKey"
:default-expanded-keys="expandedKeys"
></el-tree>
<el-button
size="small"
type="primary"
style='margin-left: 5px'
icon="el-icon-search"
@click="query"
>查询
</el-button>
<el-button
size="small"
@click="resetForm"
>重置
</el-button>
javascript
定义data
expandedKeys:[],
treeKey: 0 // 用于触发组件重新渲染的 key
搜索之后树全部展开,重置收起
javascript
query(){
this.$refs.tree.filter('');
this.handleExpandAll()
},
resetForm(){
this.queryForm={
name:'',
pbsPartName:'',
sbsSysName:'',
sbsCSysName:'',
serialNumber:'',
supplier:'',
electricalCode:'',
positionCode:'',
batchNumber:''
}
this.$refs.tree.filter('');
this.handleCollapseAll()
},
// 一键展开
handleExpandAll() {
this.expandedKeys = this.collectAllNodeIds(this.data);
console.log("this.expandedKeys",this.expandedKeys)
// 可选:若展开不生效,添加 key 刷新(一般无需)
// this.treeKey += 1;
},
// 一键收起(核心修复)
handleCollapseAll() {
this.expandedKeys = []; // 清空展开节点
this.treeKey += 1; // 关键:修改 key 强制组件重新渲染,清除缓存状态
// 双重保障:主动调用组件内部方法重置展开状态(2.15.0 兼容)
this.$nextTick(() => {
this.$refs.tree.$emit('update:default-expanded-keys', []);
});
},