mini-treeselect 不允许选父节点的写法
时间: 2023-11-09 16:06:46 浏览: 136
如果要实现 mini-treeselect 不允许选父节点的功能,可以在组件的 `before-select` 事件中实现。具体的实现方法如下:
1. 首先,在 `data` 中定义一个数组,用来存储不能选择的节点的 key 值,例如 `disabledKeys`。
2. 在 `before-select` 事件中获取当前选中节点的信息,判断当前节点是否为父节点,如果是,则将它的子节点的 key 值加入到 `disabledKeys` 数组中。
3. 在 `before-select` 事件中判断当前选中节点的 key 值是否在 `disabledKeys` 数组中,如果在,则取消选择操作。
以下是示例代码:
```html
<template>
<div>
<el-mini-treeselect
v-model="selectedNode"
:data="treeData"
:before-select="handleBeforeSelect"
/>
</div>
</template>
<script>
export default {
data() {
return {
selectedNode: null,
treeData: [
{
id: 1,
label: "一级节点1",
children: [
{
id: 2,
label: "二级节点1-1"
},
{
id: 3,
label: "二级节点1-2"
}
]
},
{
id: 4,
label: "一级节点2",
children: [
{
id: 5,
label: "二级节点2-1"
},
{
id: 6,
label: "二级节点2-2"
}
]
}
],
disabledKeys: [] // 存储不能选择的节点的 key 值
};
},
methods: {
handleBeforeSelect(node) {
// 判断当前节点是否为父节点
if (node.children && node.children.length > 0) {
// 将它的子节点的 key 值加入到 disabledKeys 数组中
node.children.forEach(child => {
this.disabledKeys.push(child.id);
});
}
// 判断当前选中节点的 key 值是否在 disabledKeys 数组中
if (this.disabledKeys.includes(node.id)) {
// 在 disabledKeys 数组中,则取消选择操作
return false;
}
// 不在 disabledKeys 数组中,则允许选择操作
return true;
}
}
};
</script>
```
在上述代码中,我们定义了一个 `disabledKeys` 数组,用来存储不能选择的节点的 key 值。在 `before-select` 事件中,我们判断当前选中节点是否为父节点,如果是,则将它的子节点的 key 值加入到 `disabledKeys` 数组中。然后,我们判断当前选中节点的 key 值是否在 `disabledKeys` 数组中,如果在,则取消选择操作,如果不在,则允许选择操作。这样,我们就实现了 mini-treeselect 不允许选父节点的功能。
阅读全文