vue3+ts封装省市区三级联动选择框组件

利用watch监听来对数据变化后重新对下一层选择框内容赋值

<template>
  <div class="flex flex-wrap">
    <el-select clearable placeholder="请选择省份" v-model="province">
      <el-option v-for="item in areas" :key="item.code" :value="item.code" :label="item.name"></el-option>
    </el-select>
    <el-select clearable  placeholder="请选择地市" v-model="city">
      <el-option v-for="item in selectCity" :key="item.code" :value="item.code" :label="item.name"></el-option>
    </el-select>
    <el-select clearable  placeholder="请选择区县" v-model="area">
      <el-option v-for="item in selectArea" :key="item.code" :value="item.code" :label="item.name"></el-option>
    </el-select>
  </div>
</template>
  
<script lang="ts" setup>
import { computed, onMounted, ref, watch } from "vue";
import allAreas from './lib/pca-code.json'

export interface AlreaItme{
  name:string
  code:string
  children?:AlreaItme[]
}
export  interface Data{
  name:string
  code:string
}

// 下拉框省份的值
let province = ref()
// 下拉框城市的值
let city = ref()
// 下拉框区域的值
let area = ref()
// 所有省市区的数据
let areas = ref(allAreas)

// 城市下拉框选择的值//
let selectCity = ref<AlreaItme[]>([])
let selectArea = ref<AlreaItme[]>([])

// 分发事件给父组件
let emit=defineEmits(['change'])
// 监听选择省份
watch(() => province.value, val => {
  if (val) {
    let cites = areas.value.find(item => item.code === province.value)!.children
    selectCity.value = cites
  }else{
    selectCity.value=[]
  }
  city.value = ''
  area.value = ''
})
// 监听选择城市
watch(() => city.value, val => {
  if (val) {
    let area = selectCity.value.find(itme => itme.code === city.value)!.children!
    selectArea.value = area
  }else{
    selectArea.value=[]
  }
  area.value = ''
})
watch(()=>area.value,val=>{
  if(val){
  let provinceData:Data={
    name:allAreas.find(item=>item.code===province.value)!.name,
    code:province.value
  }
  let cityData:Data={
    name:city.value && selectCity.value.find(item=>item.code===city.value)!.name,
    code:city.value
  }
  let areaData:Data={
    name:val && selectArea.value.find(item=>item.code===val)!.name,
    code:val
  }
  console.log(provinceData,cityData,areaData);
  emit('change',{
    province:provinceData,
    city:cityData,
    area:areaData
  })
}
  
})
</script>

地市区县数据获取来源:github.com/modood/Admi…