中国省市区地区选择组件（ElementPlus + Vue3 + TS ）

安装

npm install element-china-area-data -S

介绍

1.引用 import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from element-china-area-dat 2.用法

provinceAndCityData

：省市数据（不带“全部
    
    
 ”选项）

regionData

：省市区数据（不带“全部     


     


     ”选项）

provinceAndCityDataPlus

：省市区数据（带“全部 




 




 




”选项）

regionDataPlus

：省市区数据（带“全部

   

   

”选项）

CodeToText

：例如：CodeToText[‘110000’]输出北京市

TextToCode：例如：TextToCode[‘北京市’].code输出110000

代码

<template> <div class="areabox"> <el-select v-model="address.province" placeholder="请选择省" :style="{ width: `${prop.width}px`, marginRight: `${prop.gap}px` }" @change="handleProvinceSelect"> <el-option v-for="item in regionData" :label="item.label" :value="item.value" /> </el-select> <el-select v-model="address.city" placeholder="请选择市" :disabled="!address.province || cityList.length == 0" :style="{ width: `${prop.width}px`, marginRight: `${prop.gap}px` }" @change="handleCitySelect"> <el-option v-for="item in cityList" :label="item.label" :value="item.value" /> </el-select> <el-select v-model="address.area" placeholder="请选择区" :style="{ width: `${prop.width}px` }" :disabled="!address.province || !address.city || areaList.length == 0" @change="handleAreaSelect"> <el-option v-for="item in areaList" :label="item.label" :value="item.value" /> </el-select> </div> </template> <script lang="ts" setup> import { reactive, computed, ComputedRef } from vue import { regionData, CodeToText } from element-china-area-data const prop = withDefaults( defineProps<{ gap: string | number //选择框中间间隙 width: string | number //选择框宽度 }>(), { gap: 8, width: 210 } ) //抛出地址 const emit = defineEmits<{ (e: getAddress, data: { code: string[] //区域码 name: string[] //汉字 isComplete: boolean //是否选择完整    
    
    
，方便校验 }): void }>() let address = reactive<{ province: string city: string area: string }>({ province: , city: , area: }) interface AreaList { value: string label: string children?: AreaList[] } //切换省份函数 const handleProvinceSelect = () => { address.city = address.area = emit(getAddress, { code: [address.province], //区域码 name: [CodeToText[address.province]], //汉字 isComplete: false }) } //切换城市函数 const handleCitySelect = () => { address.area = emit(getAddress, { code: [address.province, address.city], //区域码 name: [CodeToText[address.province], CodeToText[address.city]], //汉字 isComplete: areaList.value.length == 0 ? true : false }) } //切换地区函数 const handleAreaSelect = () => { emit(getAddress, { code: [address.province, address.city, address.area], //区域码 name: [CodeToText[address.province], CodeToText[address.city], CodeToText[address.area]], //汉字 isComplete: true }) } //二级城市列表 const cityList: ComputedRef<AreaList[]> = computed((): AreaList[] => { if (!address.province) { return [] } let temp = regionData.find((item: any) => { return item.value == address.province }) return temp.children ? temp.children : [] }) //三级地区列表 const areaList: ComputedRef<AreaList[]> = computed((): AreaList[] => { if (!address.province || !address.city) { return [] } if (cityList.value.length == 0) { return [] } else { let temp = cityList.value.find((item: any) => { return item.value == address.city }) if (temp) { return temp.children ? temp.children : [] } else { return [] } } }) </script> <style scoped> .areabox { display: flex; align-items: center; } </style>

效果图

1.项目需要这种三个下拉选择框

2.选择地址

表单校验

//这里只展示地址选择部分 import type { FormRules } from element-plus export const FJRrules = reactive<FormRules>({ adress:[ {required: true,validator: addressValidator , trigger: change } ], }) const addressValidator = (rule: any, value: any, callback: any) => { if (!value) { //没有选择的情况 return callback(new Error(请选择省/市/区)) } setTimeout(() => { if (!value.isComplete) { //没有选择完整 callback(new Error(请完善地址)) } else { callback() } }, 100) } <template> <el-form ref="FJRformRef" inline :model="FJRForm" label-width="120px" :rules="FJRrules"> <el-form-item prop="adress" label="省/市/区" required> <area-selected @get-address="handleGetAdress"></area-selected> </el-form-item> </el-form> </template> <script lang="ts" setup> import { FJRrules } from 这里是校验ts文件的地址; const FJRForm = reactive({ adress:null, }) //接收省市区地址选择组件函数 const handleGetAdress = (data:any)=>{ FJRForm.adress = data } </script>