1、当项目有特殊要求,必须根据某个字段的值去判断,是否节点可以选,即使已经是末级节点了,还是需要根据字段判断是否禁用
(1) :flat="true"一定要设置
(2)获取数据源的时候,设置下禁用判断,vue-treeselect的禁用是isDisabled属性
(3)isLeaf有值就要禁用
<TreeSelect
style="width: 220px"
v-model="form.id"
:options="orgOptions"
:flat="true"
no-options-text="暂无可用选项"
:normalizer="deptnormalizer"
placeholder="请选择"
@select="node => orgHandleSelect(node)"
>
<div slot="value-label" slot-scope="{ node }">{{ node.raw.code ? `[${node.raw.code}]` : '' }}{{ node.raw.code ? node.raw.label : '' }}</div>
<div slot="option-label" slot-scope="{ node }" :style="{ marginLeft: !node.raw.children ? '16px' : '0' }">
{{ node.raw.code ? `[${node.raw.code}]` : '' }}{{ node.raw.code ? node.raw.label : '' }}
</div>
</TreeSelect>
TreeSelect().then(response => {
this.orgOptions = response.data
this.orgOptions.map(item => {
this.getLeafKeys(item)
})
})
getLeafKeys(node) {
//判断是否要禁用的条件,isLeaf有值就要禁用
if (!(node.isLeaf=== undefined || node.isLeaf=== '')) {
node.isDisabled = true
}
node.children.forEach(item => this.getLeafKeys(item))
},
deptnormalizer(node) {
if (node.children && !node.children.length) {
delete node.children
}
return {
id: node.id,
label: node.label,
children: node.children,
isDisabled: node.isDisabled
}
},
2、当项目没有特殊要求,只是要求只有末级节点可以选,直接加 :disable-branch-nodes="true"就行,最左侧没有下拉三角形的都可以选,有三角形的都不可以选
<TreeSelect
style="width: 220px"
v-model="form.id"
:options="orgOptions"
:disable-branch-nodes="true"
no-options-text="暂无可用选项"
:normalizer="deptnormalizer"
placeholder="请选择"
@select="node => orgHandleSelect(node)"
>
<div slot="value-label" slot-scope="{ node }">{{ node.raw.code ? `[${node.raw.code}]` : '' }}{{ node.raw.code ? node.raw.label : '' }}</div>
<div slot="option-label" slot-scope="{ node }" :style="{ marginLeft: !node.raw.children ? '16px' : '0' }">
{{ node.raw.code ? `[${node.raw.code}]` : '' }}{{ node.raw.code ? node.raw.label : '' }}
</div>
</TreeSelect>