Ant select 选择器 地址联动 多层包裹

标签：city const log prov value Ant formState 选择器 select

　　　　　　　　//省
　　　　　　　　<a-select
                v-model:value="formState.address"
                style="width: 180px; margin-right: 20px"
                :options="province.map((prov) => ({ value: prov.name }))"
                @change="provinceChange()"
              >
              </a-select>
　　　　　　　　//市
　　　　　　　　<a-select

                v-model:value="formState.cityaddress"                 style="width: 180px"                 :options="city.map((city) => ({ value: city.name }))"                 @change="CityChange"               ></a-select>

获取全国地名的json  

const province = ref([]) //省
const city = ref([]) //市
const area = ref([]) //区县
const initiallist = async () => {
  await axios
    .get('/src/assets/ChinaCityQU.json')
    .then((res) => {
      province.value = res.data
      console.log(province.value)
      // res.data.cityList
    })
    .catch((err) => {
      console.log(err)
    })
}
initiallist()

// 省
const provinceChange = async (value) => {
  console.log(formState.address)
  province.value.map((prov) => {
    if (prov.name == formState.address) {
      city.value = prov.city
    }
  })
}
// 市
const CityChange = async (value) => {
  console.log(formState.cityaddress)
}

 

标签：city,const,log,prov,value,Ant,formState,选择器,select
From： https://www.cnblogs.com/FuGui-Wang/p/18421946