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