elementui tree组件 限制父节点不能选中
时间: 2023-10-09 18:13:39 浏览: 117
可以通过 elementui tree 组件的 `node-click` 事件来实现限制父节点不能选中的功能。具体实现方法如下:
1. 在 `node-click` 事件中判断当前节点是否为父节点,如果是则取消选中状态,如果不是则正常处理选中状态。
2. 代码示例:
```html
<template>
<el-tree :data="data" :props="props" @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'
}
]
}
]
}
],
props: {
children: 'children',
label: 'label'
}
}
},
methods: {
handleNodeClick(node) {
if (node.children && node.children.length > 0) {
this.$refs.tree.setCurrentKey(node.id); // 取消选中状态
} else {
// 正常处理选中状态
}
}
}
}
</script>
```
在这个示例中,我们通过 `node-click` 事件来监听节点的点击事件,如果点击的节点有子节点,则取消选中状态,否则正常处理选中状态。其中,`this.$refs.tree.setCurrentKey(node.id)` 用于取消选中状态,`node.id` 是当前节点的 id,需要在节点数据中设置。
阅读全文