Ant Design Vue省市区联动

最新推荐文章于 2023-08-15 13:51:07 发布

lifelalala

最新推荐文章于 2023-08-15 13:51:07 发布

阅读量930

点赞数

分类专栏：前端文章标签：前端 vue

本文链接：https://blog.csdn.net/qq_46423858/article/details/127428859

版权

前端专栏收录该内容

37 篇文章 0 订阅

订阅专栏

可选项有

['吉林省', '辽宁省','黑龙江省']

吉林省: ['长春市', '四平市', '吉林市'],
辽宁省: ['沈阳市', '大连市', '锦州市'],
黑龙江省: ['哈尔滨市', '大庆市', '齐齐哈尔市'],

长春市: ['朝阳区', '南关区', '绿园区'],
四平市: ['铁西区', '铁东区', '梨树县'],
吉林市: ['船营区', '昌邑区', '龙谭区'],
沈阳市: ['和平区', '沈河区', '大东区'],
大连市: ['中山区', '西岗区', '沙河口区'],
锦州市: ['太和区', '古塔区', '凌河区'],
哈尔滨市: ['道里区', '南岗区', '道外区'],
大庆市: ['萨尔图区', '龙凤区', '红岗区'],
齐齐哈尔市: ['龙沙区', '建华区', '铁锋区'],

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