ant-design-vue 两个select省市联动是典型的例子（添加汉语名字）

<template>
  <div>
    <a-form :label-col='{ span: 7 }' :wrapper-col='{ span: 15 }'>
      <a-row>
        <a-col :span='12'>
          <a-form-item label='省'>
            <a-select :default-value="provinceData[0].key" style="" @change="handleProvinceChange">
              <a-select-option v-for="province in provinceData" :key="province.key">
                {{ province.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span='12'>
          <a-form-item label='市'>
            <a-select v-model="secondCity">
              <a-select-option v-for="city in cities" :key="city.key">
                {{ city.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script>

// 省 市联动
const provinceData = [
  {
    key:'Zhejiang',
    name:'浙江'
  },
  {
    key:'Jiangsu',
    name:'江苏'
  },
];
const cityData = {
  Zhejiang: [
    {
      key:'Hangzhou',
      name:'杭州'
     },
    {
      key:'Ningbo',
      name:'宁波'
    },
    {
      key:'Wenzhou',
      name:'温州'
    },
  ],
  Jiangsu: [
    {
      key:'Nanjing',
      name:'南京'
    },
    {
      key:'Suzhou',
      name:'苏州'
    },
    {
      key:'Zhenjiang',
      name:'浙江'
    },
  ],
  // Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
  // Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],
};

export default {
  components: {
   
  },
  props: {
   
  },
  data () {
    return {
      provinceData, // selected
      cityData,
      cities: cityData[provinceData[0].key],
      secondCity: cityData[provinceData[0].key][0].key,
    }
  },
  methods: {
    // selected 联动
    handleProvinceChange(value) {
      this.cities = cityData[value];
      this.secondCity = cityData[value][0].key;
      console.log(this.cities);
      // console.log(cities);
      console.log(this.secondCity)
    },

  }
}
</script>