在使用 Element UI 的 el-tree
组件时,如果你希望默认展开树的前两层节点,可以通过设置 default-expanded-keys
属性来实现。这个属性接受一个数组,数组中的值是需要默认展开的节点的 key。
首先,你需要确保你的每个树节点都有唯一的 key
值。然后,你可以通过遍历数据结构来收集前两层节点的 keys,并将这些 keys 传递给 default-expanded-keys
属性。
下面是一个简单的示例,展示如何设置 el-tree
默认展开前两层:
<template>
<el-tree
:data="data"
:props="defaultProps"
:default-expanded-keys="defaultExpandedKeys"
node-key="id">
</el-tree>
</template>
<script>
export default {
data() {
return {
data: [
{
id: 1,
label: '一级',
children: [
{
id: 4,
label: '二级',
children: [
{
id: 9,
label: '三级'
},
// 更多子节点...
]
},
// 更多子节点...
]
},
// 更多顶级节点...
],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
computed: {
defaultExpandedKeys() {
const keys = [];
this.data.forEach(item => {
keys.push(item.id); // 添加第一级节点
if (item.children) {
item.children.forEach(child => {
keys.push(child.id); // 添加第二级节点
});
}
});
return keys;
}
}
};
</script>
在这个例子中,defaultExpandedKeys
是一个计算属性,它遍历了 data
数组并收集了所有顶级节点(第一层)和它们直接子节点(第二层)的 id
。这些 id
被用来作为 default-expanded-keys
的值,从而使得 el-tree
在初始化时自动展开这两层节点。
请根据你的实际数据结构调整上述代码以适应你的需求。如果你的数据结构有所不同,你可能需要调整遍历逻辑来正确获取前两层节点的 keys。