ant-design-vue 级联选择器 编辑选择父级时禁用自己功能实现?,就是编辑的时候不可以编辑父级是自己的情况,有demo
吗详解,谢谢
你好,可以通过监听级联选择器的 change 事件来实现,当父级选择器的值变化时,判断是否选中了当前级联选择器的值,如果是则禁用父级选择器。贴上我写的demo
<template>
<a-cascader
:options="options"
:disabled="disabled"
@change="handleChange"
></a-cascader>
</template>
<script>
export default {
data() {
return {
options: [
{
value: '1',
label: 'Option 1',
children: [
{
value: '1-1',
label: 'Option 1-1',
children: [
{
value: '1-1-1',
label: 'Option 1-1-1'
}
]
},
{
value: '1-2',
label: 'Option 1-2'
}
]
},
{
value: '2',
label: 'Option 2',
children: [
{
value: '2-1',
label: 'Option 2-1'
},
{
value: '2-2',
label: 'Option 2-2'
}
]
}
],
disabled: false
}
},
methods: {
handleChange(value, selectedOptions) {
const parentValue = selectedOptions[selectedOptions.length - 2]?.value
if (parentValue === value) {
this.disabled = true
} else {
this.disabled = false
}
}
}
}
</script>