Ant Design Vue Select 下拉框联动

Ant Design Vue Select 下拉框联动组件，虽然该功能可以实现，但是建议用Cascader级联组件更方便和美观。

示例代码

<template>
  <div>
    <a-select  :default-value="province[0]"  style="width: 150px" @change="onChange">
      <a-select-option v-for="province in province" :key="province">
        {{ province }}
      </a-select-option>
    </a-select>
    <a-select  v-model="second"  style="width: 150px">
      <a-select-option v-for="city in selcity" :key="city">
        {{ city }}
      </a-select-option>
    </a-select>
  </div>
</template>
<script> 
 
export default {
  data() {
    return {
      //省份
      province: ['浙江省', '江西省'],
      //城市
      city: [['杭州市', '宁波市', '嘉兴市'], ['上饶市', '赣州市', '吉安市']],
      //根据第一个选项 获取第二给下拉框的数据（也可以是后台ajax请求）
      selcity:[],
      //第二个下拉框的默认选中值
      second:'杭州市',
    };
  },
  computed:{
    second(){
           return  this.city[0][0];
    }
  },
  methods: {
    onChange(value) {
       if(value=='浙江省')  this.selcity = this.city[0];
       if(value=='江西省')  this.selcity = this.city[1];
       this.second=this.selcity[0];
    },
  },
};
</script>

例子