一个多选框控制el-tree展开与折叠 使用ref 使用this.$refs

可以使用以下代码实现：

<template>
<div>
<el-checkbox v-model="checked" @change="handleChange">展开/折叠</el-checkbox>
<el-tree :data="data" :props="defaultProps" ref="tree"></el-tree>
</div>
</template>

<script>
export default {
data() {
return {
checked: false,
data: [
{
label: '一级 1',
children: [
{
label: '二级 1-1',
children: [
{
label: '三级 1-1-1'
},
{
label: '三级 1-1-2'
}
]
},
{
label: '二级 1-2',
children: [
{
label: '三级 1-2-1'
},
{
label: '三级 1-2-2'
}
]
}
]
}
],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
handleChange() {
this.$refs.tree.setCheckedKeys([]);
if (this.checked) {
this.$refs.tree.filter('');
} else {
this.$refs.tree.filter(' ');
}
}
}
};
</script>

在这个例子中，我们使用了一个多选框来控制 el-tree 的展开与折叠。当多选框被选中时，我们使用 this.$refs.tree.filter('') 来展开所有节点，当多选框未被选中时，我们使用 this.$refs.tree.filter(' ') 来折叠所有节点。同时，我们使用 this.$refs.tree.setCheckedKeys([]) 来清空所有选中的节点。