默认第一项展开:
展开所有项:
折叠所有项:
javascript
<template>
<el-tree
style="max-width: 600px"
:data="treeData"
node-key="id"
:default-expanded-keys="defaultExpandedKey"
:props="defaultProps"
ref="treeRef"
/>
<el-button @click="expandAll" type="primary" plain>展开所有</el-button>
<el-button @click="collapseAll" type="success" plain>折叠所有</el-button>
</template>
<script setup>
import { ref } from 'vue'
const defaultProps = {
children: 'children',
label: 'label',
}
const treeData = ref([])
const treeRef = ref(null)
const defaultExpandedKey= ref([])
const expandAll = () => {
treeRef.value.store._getAllNodes().forEach(node => {
node.expanded = true;
});
}
const collapseAll = () => {
treeRef.value.store._getAllNodes().forEach(node => {
node.expanded = false;
});
}
// 此处使用定时器渲染数据,实际情况发送请求获取数据之后再设置
setTimeout(()=>{
defaultExpandedKey.value = ['1','4']
treeData.value = data
},1000)
const getTreeData = async () => {
const { data } = await getTreeList();
treeData.value = data;
defaultExpandedKey.value = data[0].map((item) => item.id);
};
const data = [
{
id: 1,
label: 'Level one 1',
children: [
{
id: 4,
label: 'Level two 1-1',
children: [
{
id: 9,
label: 'Level three 1-1-1',
},
{
id: 10,
label: 'Level three 1-1-2',
},
],
},
],
},
{
id: 2,
label: 'Level one 2',
children: [
{
id: 5,
label: 'Level two 2-1',
},
{
id: 6,
label: 'Level two 2-2',
},
],
},
{
id: 3,
label: 'Level one 3',
children: [
{
id: 7,
label: 'Level two 3-1',
},
{
id: 8,
label: 'Level two 3-2',
},
],
},
]
</script>