vue3+Ant Design Vue 省市区级联操作

<template>
  <div
                  style="
                    display: flex;
                    flex-direction: column;
                    width: 66%;
                    height: 100%;
                    align-items: flex-start;
                    justify-content: space-evenly;
                  "
                >
                <span>省份：</span>
                  <a-select :default-value="province" placeholder="请选择省" :options="provinces" @change="handleChange"
                     class="selectCss" ref="provinceSelect" v-model:value="provinceName">
                  </a-select>
                  <span>市区：</span>
                  <a-select :default-value="city" placeholder="请选择市" :options="cities" @change="handleChange2"
                     class="selectCss" ref="citySelect" v-model:value="cityName">
                  </a-select>
                  <span>区县：</span>
                  <a-select :default-value="area" placeholder="请选择区县" :options="areas" @change="handleChange3"
                     class="selectCss" ref="areaSelect" v-model:value="areaName">
                  </a-select>
               <div>
               </div>
                </div>
</template>

<script setup lang="ts">
import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  ref,
  onUnmounted,
  nextTick,
  watch,
} from 'vue';

import pcaa from 'china-area-data';
const provinces = ref()
const cities = ref([])
const areas = ref([])
const provinceCode = ref('')//选中省的代码
const cityCode = ref('')//选中省的代码
const provinceName = ref('')//选中的市的名字
const cityName = ref('')//选中的市的名字
const areaCode = ref('')
const areaName = ref('')
const provinceSelect = ref()
const citySelect = ref()
const areaSelect = ref()



// 获取省份
function getProvince() {
   let arr = []
   const province = pcaa['86']
   Object.keys(province).map(key => {
      arr.push({
         value: key,
         label: province[key],
      });
   })
   return arr;

}
// 获取城市
const getCity = (province) => {
   let arr = []
   const city = pcaa[province]
   Object.keys(city).map(key => {
      arr.push({
         value: key,
         label: city[key],
      });
   })
   return arr
}
// 获取区县
const getArea = (city) => {
   let arr = []
   const area = pcaa[city]
   Object.keys(area).map(key => {
      arr.push({
         value: key,
         label: area[key],
      });
   })
   return arr
}
// 根据选择的省，更新市的下拉选项
const handleChange = (value) => {

   cities.value = getCity(value);
   provinceCode.value = value;
   // 根据code获取name
   let index = provinces.value.findIndex(item => item.value == value);
   provinceName.value = provinces.value[index].label;
   cityName.value = ""
   areaName.value = ""
  

}
// 选择市
const handleChange2 = (value) => {

   cityCode.value = value;
   areas.value = getArea(value)
   let index = cities.value.findIndex(item => item.value == value);
   cityName.value = cities.value[index].label;
   // if (cityName.value === '市辖区') {
   //    cityName.value = ''
   // }
   areaName.value = ""


}
// 选择市
const handleChange3 = (value) => {

   areaCode.value = value;
   let index = areas.value.findIndex(item => item.value == value);
   areaName.value = areas.value[index].label;
}
</script>
<style lang="scss" scoped>

</style>