vue3.0实现省市县三级联动

1、省市县json数据，包括台湾省，文件名称为address.json，存放在assets/json文件夹下面

https://github.com/zxc19890923/province-city-country-json/blob/main/address.json

2、定义组件LinkageBetweenProCityCountry.vue，ui使用的是elementPlus

<template>
  <div>
    <!-- value绑定的是对象，当改变值的可以取item的值，这时候必须制定value-key的值，标识选择框中显示的字段名称 -->
    <el-select v-model="data.provinceObj" placeholder="请选择" @change="provinceChange" value-key="name">
      <el-option v-for="(item, index) in data.provinceData" :key="index" :label="item.name" :value="item"></el-option>
    </el-select>&nbsp;&nbsp;
    <el-select v-model="data.cityObj" placeholder="请选择" @change="cityChange" value-key="name">
      <el-option v-for="(item, index) in data.cityData" :key="index" :label="item.name" :value="item"></el-option>
    </el-select>&nbsp;&nbsp;
    <el-select v-model="data.countryObj" placeholder="请选择" @change="countryChange" value-key="name">
      <el-option v-for="(item, index) in data.countryData" :key="index" :label="item.name" :value="item"></el-option>
    </el-select>&nbsp;&nbsp;
  </div>
  <div>
    {{data.provinceObj.name}} {{data.cityObj.name}} {{data.countryObj.name }}
  </div>
</template>

<script>
import { reactive, ref } from 'vue'
import ProvinceCityCountry from '../../assets/json/address'
export default {
  setup () {
    const data = reactive({
      provinceObj: {name: ''},
      cityObj: {name: ''},
      countryObj: {name: ''},
      provinceData: ProvinceCityCountry.address,
      cityData: [],
      countryData: []
    })
    // 省份change
    const provinceChange = (value) => {
      data.cityData = value.children  // 市下拉列表
      data.countryData = []  // 清空区县下拉列表数据
      data.cityObj = {} // 清空市输入框内容
      data.countryObj = {}  // 清空区县输入框内容
    }
    // 市change
    const cityChange = (value) => {
      data.countryData = value.children // 县区下拉框列表
      data.countryObj = {}  // 清空区县输入框内容
    }
    // 县change
    const countryChange = (value) => {
      console.log(data)
    }
    return {
      data,
      provinceChange,
      cityChange,
      countryChange
    }
  }
}
</script>

<style lang="scss" scoped>

</style>