vue3+ el-tree 展开和折叠，默认展开第一项

默认第一项展开:

展开所有项：

折叠所有项：

<template><el-treestyle="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>