可选项有
['吉林省', '辽宁省','黑龙江省']
吉林省: ['长春市', '四平市', '吉林市'],
辽宁省: ['沈阳市', '大连市', '锦州市'],
黑龙江省: ['哈尔滨市', '大庆市', '齐齐哈尔市'],
长春市: ['朝阳区', '南关区', '绿园区'],
四平市: ['铁西区', '铁东区', '梨树县'],
吉林市: ['船营区', '昌邑区', '龙谭区'],
沈阳市: ['和平区', '沈河区', '大东区'],
大连市: ['中山区', '西岗区', '沙河口区'],
锦州市: ['太和区', '古塔区', '凌河区'],
哈尔滨市: ['道里区', '南岗区', '道外区'],
大庆市: ['萨尔图区', '龙凤区', '红岗区'],
齐齐哈尔市: ['龙沙区', '建华区', '铁锋区'],
<template><div><a-select :default-value="provinceData[0]" style="width: 120px" @change="handleProvinceChange"><a-select-option v-for="province in provinceData" :key="province">{{ province }}</a-select-option></a-select><a-select v-model="secondCity" style="width: 120px" @change="handleCityChange"><a-select-option v-for="city in cities" :key="city">{{ city }}</a-select-option></a-select><a-select v-model="thirdDistrict" style="width: 120px"><a-select-option v-for="district in districts" :key="district">{{ district }}</a-select-option></a-select></div></template><script>const provinceData = ['吉林省', '辽宁省','黑龙江省'];const cityData = {吉林省: ['长春市', '四平市', '吉林市'],辽宁省: ['沈阳市', '大连市', '锦州市'],黑龙江省: ['哈尔滨市', '大庆市', '齐齐哈尔市'],};const districtData = {长春市: ['朝阳区', '南关区', '绿园区'],四平市: ['铁西区', '铁东区', '梨树县'],吉林市: ['船营区', '昌邑区', '龙谭区'],沈阳市: ['和平区', '沈河区', '大东区'],大连市: ['中山区', '西岗区', '沙河口区'],锦州市: ['太和区', '古塔区', '凌河区'],哈尔滨市: ['道里区', '南岗区', '道外区'],大庆市: ['萨尔图区', '龙凤区', '红岗区'],齐齐哈尔市: ['龙沙区', '建华区', '铁锋区'],};export default {data() {return {provinceData,cityData,districtData,cities:cityData[provinceData[0]],secondCity:cityData[provinceData[0]][0],districts:districtData[cityData[provinceData[0]][0]],thirdDistrict:districtData[cityData[provinceData[0]][0]][0],};},methods: {handleCityChange(value) {this.districts = districtData[value]this.thirdDistrict = districtData[value][0]},handleProvinceChange(value) {this.cities = cityData[value]this.secondCity = cityData[value][0]this.districts = districtData[cityData[value][0]]this.thirdDistrict = districtData[cityData[value][0]][0]},},};</script>
