el-tree 设置只能展开两级
时间: 2023-07-20 11:28:27 浏览: 158
要实现 el-tree 只能展开两级的功能,可以使用 el-tree 的 expand-on-click-node 和 show-checkbox 属性配合实现。具体做法如下:
1. 设置 expand-on-click-node 属性为 true,这样单击节点时会自动展开/收缩。
2. 设置 show-checkbox 属性为 true,这样可以在节点前面显示复选框。
3. 监听 el-tree 的 node-click 事件,在事件处理函数中判断当前点击的节点是否为第三级及以下节点,如果是则禁止展开/收缩,否则允许展开/收缩。例如:
```
<template>
<el-tree
:data="data"
:expand-on-click-node="true"
:show-checkbox="true"
@node-click="handleNodeClick">
</el-tree>
</template>
<script>
export default {
data() {
return {
data: [
{
label: '一级 1',
children: [
{
label: '二级 1-1',
children: [
{
label: '三级 1-1-1'
},
{
label: '三级 1-1-2'
}
]
},
{
label: '二级 1-2',
children: [
{
label: '三级 1-2-1'
},
{
label: '三级 1-2-2'
}
]
}
]
}
]
};
},
methods: {
handleNodeClick(node) {
if (node.level >= 2) {
return false; // 禁止展开/收缩第三级及以下节点
}
}
}
};
</script>
```
这样做可以实现 el-tree 只能展开两级的效果。
阅读全文