vue ant select 三个下拉框 第一个选中值后 第二个自动展开第二个选中值后自动关闭 第三个自动展开选中后关闭

对于Vue Ant Design中的三个下拉框联动，你可以通过监听各个下拉框的选中事件来实现展开和关闭的效果。具体步骤如下：

1. 在Vue组件中，定义三个下拉框的数据和选中值：

<template>
  <div>
    <a-select v-model="firstSelectValue" @change="handleFirstSelectChange">
      <a-select-option value="option1">Option 1</a-select-option>
      <a-select-option value="option2">Option 2</a-select-option>
    </a-select>

    <a-select v-model="secondSelectValue" v-if="isSecondSelectVisible" @change="handleSecondSelectChange">
      <a-select-option value="option3">Option 3</a-select-option>
      <a-select-option value="option4">Option 4</a-select-option>
    </a-select>

    <a-select v-model="thirdSelectValue" v-if="isThirdSelectVisible" @change="handleThirdSelectChange">
      <a-select-option value="option5">Option 5</a-select-option>
      <a-select-option value="option6">Option 6</a-select-option>
    </a-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstSelectValue: "",
      secondSelectValue: "",
      thirdSelectValue: "",
      isSecondSelectVisible: false,
      isThirdSelectVisible: false
    };
  },
  methods: {
    handleFirstSelectChange(value) {
      // 根据第一个下拉框的选中值决定是否展开第二个下拉框
      if (value !== "") {
        this.isSecondSelectVisible = true;
      } else {
        this.isSecondSelectVisible = false;
        this.isThirdSelectVisible = false;
      }
      
      // 清空第二个和第三个下拉框的选中值
      this.secondSelectValue = "";
      this.thirdSelectValue = "";
    },
    handleSecondSelectChange(value) {
      // 根据第二个下拉框的选中值决定是否展开第三个下拉框
      if (value !== "") {
        this.isThirdSelectVisible = true;
      } else {
        this.isThirdSelectVisible = false;
      }
      
      // 清空第三个下拉框的选中值
      this.thirdSelectValue = "";
    },
    handleThirdSelectChange(value) {
      // 根据第三个下拉框的选中值决定是否关闭第三个下拉框
      if (value !== "") {
        this.isThirdSelectVisible = false;
      }
    }
  }
};
</script>

在上述代码中，第一个下拉框通过`v-model`绑定了`firstSelectValue`，当其选中值发生变化时，会触发`handleFirstSelectChange`方法。在该方法中，根据第一个下拉框的选中值，设置`isSecondSelectVisible`变量来决定第二个下拉框是否展开。同时，清空第二个和第三个下拉框的选中值，并将`isThirdSelectVisible`置为false。

在第二个下拉框和第三个下拉框的选中事件处理方法中，也需要根据选中值的不同来控制下拉框的展开和关闭，并清空相应的选中值。

这样，当你选择第一个下拉框的选项时，第二个下拉框会自动展开，选择第二个下拉框的选项时，第三个下拉框会自动展开，选择第三个下拉框的选项时，第三个下拉框会自动关闭。