不支持

Ant 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)
}

 

posted @ 2024-09-20 10:18  骑上我的小摩托  阅读(6)  评论(0编辑  收藏  举报