element el-tree 折叠所有节点
时间: 2023-01-17 11:46:03 浏览: 72
可以使用 el-tree 组件的 collapse 方法来折叠所有节点。
使用方式如下:
1. 在 template 中声明一个按钮,并绑定点击事件,调用 el-tree 组件的 collapse 方法。
```
<template>
<el-button @click="collapseAll">折叠所有节点</el-button>
<el-tree ref="tree" :data="data" default-expanded-keys="['0-0-0']">
</el-tree>
</template>
```
2. 在 script 中声明方法,调用 el-tree 组件的 collapse 方法。
```
<script>
export default {
data() {
return {
data: [{
id: 1,
label: '一级 1',
children: [{
id: 4,
label: '二级 1-1',
children: [{
id: 9,
label: '三级 1-1-1'
}, {
id: 10,
label: '三级 1-1-2'
}]
}]
}, {
id: 2,
label: '一级 2',
children: [{
id: 5,
label: '二级 2-1'
}, {
id: 6,
label: '二级 2-2'
}]
}, {
id: 3,
label: '一级 3',
children: [{
id: 7,
label: '二级 3-1'
}, {
id: 8,
label: '二级 3-2'
}]
}]
}
},
methods: {
collapseAll() {
this.$refs.tree.collapseAll()
}
}
}
</script>
```
这样,当你点击按钮时,el-tree 中的所有节点都会被折叠。
注意:使用 collapse 方法时,需要在 el-tree 组件上使用 ref 属性,并在方法中使用 this.$refs 访问 el-tree 组件实例。
阅读全文