el-tree-select禁止选父级
时间: 2025-03-04 11:44:26 浏览: 62
### 实现 `el-tree-select` 禁止选择父级节点
为了实现在 `el-tree-select` 组件中仅允许选择子节点而不允许选择父节点的功能,可以利用组件的属性和事件来达到目的。具体来说:
通过设置 `check-strictly=true` 属性使得父子节点之间的关联断开,这样可以选择任意级别的节点而不会影响其他级别[^1]。
对于阻止父节点被选中的情况,则可以在 `filter-node-method` 方法内加入逻辑判断,当检测到尝试选择的是父节点时返回 false 来阻止其高亮;或者是在点击事件处理函数里拦截并取消默认行为[^2]。
另外一种更直观的方式是直接定义 `disabled` 字段,在数据源中给定哪些项应该处于不可用状态(即不允许被选),通常用于表示某一层级下的所有项目都不可再往下展开或选取[^3]。
下面是一个具体的例子展示如何操作:
```html
<template>
<div class="app-container">
<!-- 使用 disabled 控制是否可选 -->
<el-tree-select v-model="value" :data="options" check-strictly placeholder="请选择"
:props="{ value: 'id', label: 'label', children: 'children', disabled:'isParent'}"></el-tree-select>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{
id: 1,
label: "一级 1",
isParent: true, // 设置此字段为true则该选项不可选
children: [{ id: 4, label: "二级 1-1", isParent: false }]
},
{
id: 2,
label: "一级 2",
isParent: true,
children: [
{ id: 5, label: "二级 2-1", isParent: false },
{ id: 6, label: "二级 2-2", isParent: false }
]
}
],
value: null
};
}
};
</script>
```
在这个案例中,通过向每个对象添加了一个名为 `isParent` 的布尔型标志位,并将其绑定到了 `el-tree-select` 的 `disabled` 参数上,从而实现了只有非父类别的条目才可供用户挑选的效果。
阅读全文
相关推荐


















