el-tree 设置默认展开指定层级
在Element UI中,可以通过default-expanded-keys
属性来设置默认展开指定的节点。你需要先知道你想要展开的节点的key
值,然后将这些key
值放入一个数组中,并将该数组传递给default-expanded-keys
属性。
以下是一个简单的例子,展示如何设置默认展开第一层和第二层:
<template>
<el-tree
:data="treeData"
:props="defaultProps"
:default-expanded-keys="defaultExpandedKeys"
></el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [
{
id: 1,
label: '一级 1',
children: [
{
id: 4,
label: '二级 1-1',
},
// 更多子节点...
],
},
// 更多根节点...
],
defaultProps: {
children: 'children',
label: 'label'
},
defaultExpandedKeys: []
};
},
mounted() {
this.setDefaultExpandedKeys(this.treeData);
},
methods: {
setDefaultExpandedKeys(nodes) {
nodes.forEach(node => {
this.defaultExpandedKeys.push(node.id);
if (node.children) {
this.setDefaultExpandedKeys(node.children);
}
});
}
}
};
</script>
在这个例子中,我们在mounted
钩子中调用了setDefaultExpandedKeys
方法,该方法遍历整个树结构,收集所有节点的id
并添加到defaultExpandedKeys
数组中。这样,当el-tree
组件渲染时,它将会默认展开所有标记为defaultExpandedKeys
的节点。
评论已关闭