中国省市区地区选择组件（ElementPlus + Vue3 + TS ）(中国各省市区域划分)

中国省市区地区选择组件（ElementPlus + Vue3 + TS ） 中国省市区地区选择组件（ElementPlus + Vue3 + TS ）安装npm install element-china-area-data -S介绍1.引用import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-dat2.用法

推荐整理分享中国省市区地区选择组件（ElementPlus + Vue3 + TS ）(中国各省市区域划分)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:中国省份及市区,中国省份及市区,中国省份及市区,中国省市区地区划分,中国省市区地区地图,中国省市区地区划分,中国省市区地区划分,中国省市区地区划分,内容如对您有帮助，希望把文章链接给更多的朋友！

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>