ant-design-vue 级联选择器 编辑选择父级时禁用自己功能实现

Question

ant-design-vue 级联选择器 编辑选择父级时禁用自己功能实现？，就是编辑的时候不可以编辑父级是自己的情况，有demo
吗详解，谢谢

Answer 1

你好,可以通过监听级联选择器的 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>