antd pro vue 2个select 多选 联动

可以通过监听第一个 Select 的 change 事件，然后根据选择的值来动态更新第二个 Select 的选项。

具体步骤如下：

1. 定义两个 Select 组件，并为它们分别绑定 value 和 options 属性。

<template>
  <div>
    <a-select
      mode="multiple"
      :value="selectedValues"
      @change="handleFirstSelectChange"
    >
      <a-select-option v-for="option in firstOptions" :key="option.value">
        {{ option.label }}
      </a-select-option>
    </a-select>
    <a-select mode="multiple" :value="secondSelectedValues">
      <a-select-option v-for="option in secondOptions" :key="option.value">
        {{ option.label }}
      </a-select-option>
    </a-select>
  </div>
</template>

2. 在组件的 data 中定义两个数组，分别用于存储第一个 Select 和第二个 Select 的选项以及选中的值。

export default {
  data() {
    return {
      selectedValues: [],
      secondSelectedValues: [],
      firstOptions: [
        { label: 'Option 1', value: 1 },
        { label: 'Option 2', value: 2 },
        { label: 'Option 3', value: 3 },
      ],
      secondOptions: [
        { label: 'Option A', value: 'A' },
        { label: 'Option B', value: 'B' },
        { label: 'Option C', value: 'C' },
      ],
    };
  },
  // ...
};

3. 实现第一个 Select 的 change 事件处理方法。

export default {
  // ...
  methods: {
    handleFirstSelectChange(value) {
      // 根据选择的值动态更新第二个 Select 的选项
      if (value.includes(1)) {
        this.secondOptions = [
          { label: 'Option A', value: 'A' },
          { label: 'Option B', value: 'B' },
        ];
      } else if (value.includes(2)) {
        this.secondOptions = [
          { label: 'Option B', value: 'B' },
          { label: 'Option C', value: 'C' },
        ];
      } else {
        this.secondOptions = [
          { label: 'Option A', value: 'A' },
          { label: 'Option C', value: 'C' },
        ];
      }
      // 重置第二个 Select 的选中值
      this.secondSelectedValues = [];
    },
  },
};

4. 最后，将第二个 Select 组件的 value 属性绑定到组件的 secondSelectedValues 数据属性上。

<a-select mode="multiple" :value="secondSelectedValues">
  <a-select-option v-for="option in secondOptions" :key="option.value">
    {{ option.label }}
  </a-select-option>
</a-select>

这样，当用户选择第一个 Select 的选项时，第二个 Select 的选项会根据选择的值动态更新，并且第二个 Select 的选中值会被重置。