el-tree-select/el-tree设置只显示两个层级
在Element UI中,el-tree
组件支持通过设置props
属性来定义树节点的层级关系。如果你想要限制树的显示层级,可以在props
中设置checkStrictly
为true
,这样用户就只能选择到指定的层级。
以下是一个简单的例子,展示如何使用el-tree
组件只显示两层级别的树:
<template>
<el-tree
:data="data"
:props="defaultProps"
:check-strictly="true"
node-key="id"
ref="tree"
></el-tree>
</template>
<script>
export default {
data() {
return {
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'
}
]
}
]
},
// ... 其他数据
],
defaultProps: {
children: 'children',
label: 'label'
}
};
}
};
</script>
在这个例子中,el-tree
组件被设置了check-strictly
属性为true
,这意味着用户只能选择到最深层级的节点,即只能选择到“Level three”级别的节点,超过两层级别的节点将不会显示。注意,这里的node-key
属性是必须的,它指定了每个树节点的唯一标识。
评论已关闭