Element UI级联选择器 多选模式下，实现同一父级下最多只能选中一个子级

在Element UI的级联选择器（Cascader）组件中，要实现同一父级下最多只能选中一个子级的功能，可以通过设置组件的props属性来实现。

以下是实现这一功能的示例代码：

<template>
  <el-cascader
    :options="options"
    v-model="selectedValue"
    :props="{ multiple: true, checkStrictly: true }"
    @change="handleChange"
  ></el-cascader>
</template>
 
<script>
export default {
  data() {
    return {
      selectedValue: [],
      options: [
        {
          value: 'guid1',
          label: 'Parent 1',
          children: [
            {
              value: 'guid-1-1',
              label: 'Child 1-1'
            },
            {
              value: 'guid-1-2',
              label: 'Child 1-2'
            }
          ]
        },
        {
          value: 'guid2',
          label: 'Parent 2',
          children: [
            {
              value: 'guid-2-1',
              label: 'Child 2-1'
            },
            {
              value: 'guid-2-2',
              label: 'Child 2-2'
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleChange(value) {
      // 实现同一父级下只能选中一个子级
      const parentValues = this.getParentValues(value[0]);
      for (let val of value) {
        if (parentValues.includes(val)) {
          this.selectedValue = [val];
          break;
        }
      }
    },
    getParentValues(childValue) {
      const parentValues = [];
      const findParent = (options, value) => {
        for (let option of options) {
          if (option.value === value) {
            parentValues.push(option.value);
            if (option.parentValue) findParent(this.options, option.parentValue);
          } else if (option.children) {
            findParent([option], value);
          }
        }
      };
      findParent(this.options, childValue);
      return parentValues;
    }
  }
};
</script>

在这个示例中，el-cascader组件被设置为多选模式（multiple: true），并且通过checkStrictly: true来确保选中子级时，父级不会被选中。handleChange方法用于监听值变化，并重新设置selectedValue以确保同一父级下只有一个子级被选中。getParentValues方法用于获取一个值的所有父级值。