Vue3单文件组件实现省市区县三级联动

Provinces.vue

<template>

    <div class="select-container">

        <select v-model="selectedProvince" @change="handleProvinceChange">

            <option value="" disabled>请选择省份</option>

            <option v-for="item in provinces" :key="item.code" :value="item.code">{{ item.text }}</option>

        </select>

        <select v-model="selectedCity" @change="handleCityChange">

            <option value="" disabled>请选择城市</option>

            <option v-for="item in cities" :key="item.code" :value="item.code">{{ item.text }}</option>

        </select>

        <select v-model="selectedCounty" @change="handleCountyChange">

            <option value="" disabled>请选择区县</option>

            <option v-for="item in counties" :key="item.code" :value="item.code">{{ item.text }}</option>

        </select>

    </div>

</template>

<script setup>

import { ref, onMounted } from 'vue'

const provinces = ref([])

const cities = ref([])

const counties = ref([])

const selectedProvince = ref('')

const selectedCity = ref('')

const selectedCounty = ref('')

const handleProvinceChange = () => {

    for (let province of provinces.value) {

        if (province.code === selectedProvince.value) {

            cities.value = province.cities;

            selectedCity.value = '';

            selectedCounty.value = '';

            counties.value = [];

        }

    }

}

const handleCityChange = () => {

    for (let city of cities.value) {

        if (city.code === selectedCity.value) {

            counties.value = city.counties;

            selectedCounty.value = '';

        }

    }

}

const handleCountyChange = () => {

    console.log(selectedProvince.value);

    console.log(selectedCity.value);

    console.log(selectedCounty.value);

}

// 1.获取省份数据  

async function fetchData(url) {

    try {

        const response = await fetch(url, {

            method: 'POST',

            headers: {

                'Content-Type': 'application/json'

            }

        })

        const data = await response.json();

        return data;

    } catch (error) {

        console.log("fetct data error:", error);

    }

}

onMounted(async () => {

    fetchData('src/data/provinces.json').then(res => {

        console.log(res);

        provinces.value = res;

    })

})

</script>

<style scoped>

select {

    width: 200px;

    height: 25px;

    line-height: 25px;

    border: 1px solid #ccc;

    border-radius: 5px;

}

</style>

数据文件：provinces.json

[

  {

    "code": "220000",

    "text": "吉林省",

    "cities": [

      {

        "text": "长春市",

        "code": "220100",

        "counties": [

          { "text": "南关区", "code": "220102" },

          { "text": "宽城区", "code": "220103" }

        ]

      },

      {

        "text": "吉林市",

        "code": "220200",

        "counties": [

          { "text": "昌邑区", "code": "220202" },

          { "text": "龙潭区", "code": "220203" }

        ]

      },

      {

        "text": "四平市",

        "code": "220300",

        "counties": [

          { "text": "铁西区", "code": "220302" },

          { "text": "铁东区", "code": "220303" }

        ]

      }

    ]

  },

  {

    "code": "210000",

    "text": "辽宁省",

    "cities": [

      {

        "text": "沈阳市",

        "code": "210100",

        "counties": [

          { "text": "和平区", "code": "210102" },

          { "text": "沈河区", "code": "210103" },

          { "text": "大东区", "code": "210104" },

          { "text": "皇姑区", "code": "210105" }

        ]

      },

      {

        "text": "大连市",

        "code": "210200",

        "counties": [

          { "text": "中山区", "code": "210102" },

          { "text": "西岗区", "code": "210203" }

        ]

      },

      {

        "text": "鞍山市",

        "code": "210300",

        "counties": [

          { "text": "铁东区", "code": "210302" },

          { "text": "铁西区", "code": "210303" }

        ]

      }

    ]

  },

  {

    "code": "230000",

    "text": "黑龙江省",

    "cities": [

      {

        "text": "哈尔滨市",

        "code": "230100",

        "counties": [

          { "text": "道里区", "code": "230102" },

          { "text": "南岗区", "code": "230103" }

        ]

      },

      {

        "text": "齐齐哈尔市",

        "code": "230200",

        "counties": [

          { "text": "龙沙区", "code": "230202" },

          { "text": "建华区", "code": "230203" }

        ]

      },

      {

        "text": "鸡西市",

        "code": "230300",

        "counties": [

          { "text": "鸡冠区", "code": "230302" },

          { "text": "恒山区", "code": "230303" }

        ]

      }

    ]

  }

]