vue-treeselect怎么设置只允许选末级节点
时间: 2023-12-06 13:05:47 浏览: 149
要设置只允许选择末级节点,可以使用 `normalizer` 属性。在 `normalizer` 函数中,判断选中的节点是否有子节点,如果有子节点则将其过滤,只返回末级节点。
下面是一个示例代码:
```vue
<template>
<treeselect
v-model="value"
:options="options"
:normalizer="normalizer"
:no-children-label="'末级节点'"
:clearable="false"
:multiple="true"
:emit-value="true"
:limit-text-length="30"
:close-on-select="false"
:open-on-focus="true"
placeholder="请选择"
/>
</template>
<script>
import Treeselect from '@riophae/vue-treeselect'
export default {
components: {
Treeselect,
},
data() {
return {
value: [],
options: [
{
id: 1,
label: '节点1',
children: [
{
id: 11,
label: '节点1.1',
children: [
{
id: 111,
label: '节点1.1.1',
},
{
id: 112,
label: '节点1.1.2',
},
],
},
{
id: 12,
label: '节点1.2',
},
],
},
{
id: 2,
label: '节点2',
children: [
{
id: 21,
label: '节点2.1',
},
{
id: 22,
label: '节点2.2',
children: [
{
id: 221,
label: '节点2.2.1',
},
{
id: 222,
label: '节点2.2.2',
},
],
},
],
},
],
}
},
methods: {
normalizer(node) {
// 判断节点是否有子节点
if (node.children && node.children.length === 0) {
return node
} else {
return null
}
},
},
}
</script>
```
在上面的示例中,使用 `normalizer` 函数过滤了所有非末级节点,只显示末级节点。同时,使用 `no-children-label` 属性将没有子节点的节点标记为“末级节点”。
阅读全文