<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>
vue3+Ant Design Vue 省市区级联操作
最新推荐文章于 2023-08-15 13:51:07 发布