当前位置：首页 > news >正文

vue3+element-china-area-data 实现省市区三级联动

news 2025/11/15 9:13:02

vue3+element-china-area-data 实现省市区三级联动

概述

本文将详细介绍如何使用Vue3和element-china-area-data插件实现省市区三级联动功能，包含安装、基础使用、数据转换和实际应用场景。

1.安装与引入

1.1 安装省市区数据包（官网地址）

npm install element-china-area-data -S

1.2 引入数据模块

<script setup lang="ts">import { codeToText, pcaTextArr, pcTextArr, provinceAndCityData, regionData } from 'element-china-area-data'
</script>

2.完整组件实现示例

<script setup lang="ts">import { codeToText, pcaTextArr, pcTextArr, provinceAndCityData, regionData } from 'element-china-area-data'const emits = defineEmits(['update:open', 'submit'])const props = defineProps({open: {type: Boolean,default: false},type: {type: String,default: ''},Id: {type: String,default: ''}})const formRef = ref()const form = reactive<any>({regionId01: '',regionId02: '',regionId03: '',regionId04: ''})async function submit(formEl: FormInstance | undefined) {if (!formEl) returnawait formEl.validate((valid) => {console.log(form)})}function changeCity(value: any) {console.log(value)}
</script><template><el-dialog draggable width="40%" :model-value="open"><div><el-scrollbar max-height="60vh"><el-form ref="formRef" :model="form" :rules="rules" label-width="auto"><div><div class="mb-[15px]">省市区三级联动数据,汉字+code</div><el-form-item label="地区" prop="regionId01"><el-cascader v-model="form.regionId01" clearable :options="regionData" @change="changeCity" style="width: 100%"> </el-cascader></el-form-item><div class="mb-[15px]">省市区联动数据，纯汉字</div><el-form-item label="地区" prop="regionId02"><el-cascader v-model="form.regionId02" clearable :options="pcaTextArr" @change="changeCity" style="width: 100%"> </el-cascader></el-form-item><div class="mb-[15px]">省市二级联动数据,汉字+code</div><el-form-item label="地区" prop="regionId03"><el-cascader v-model="form.regionId03" clearable :options="provinceAndCityData" @change="changeCity" style="width: 100%"> </el-cascader></el-form-item><div class="mb-[15px]">省市二级联动数据，纯汉字</div><el-form-item label="地区" prop="regionId04"><el-cascader v-model="form.regionId04" clearable :options="pcTextArr" @change="changeCity" style="width: 100%"> </el-cascader></el-form-item></div></el-form></el-scrollbar></div><template #footer><div class="dialog-footer"><el-button @click="handleClose">取消</el-button><el-button type="primary" @click="submit(formRef)">确定</el-button></div></template></el-dialog>
</template>

3. 核心功能详解

regionData 省市区三级联动数据
pcaTextArr省市区联动数据，纯汉字
provinceAndCityData省市二级联动数据,汉字+code
pcaTextArr省市区联动数据，纯汉字
codeToText是个大对象，属性是区域码，属性值是汉字用法例如：codeToText[‘110000’]输出北京市

V6版本改动如下：
在这里插入图片描述

4.打印结果如下（根据项目具体需求自行选择）

在这里插入图片描述
一般来说前端入什么参后端就存数据，那如果存的的区域码，前端如何正常回显，这里就需要做一个汉字区域到区域码的转换了，可参考下面的转行函数

	// 将汉字区域转换为区域码function textToCode(regionName: string): string[] {if (!regionName) return []const names = regionName.split(',').map((name) => name.trim())const codes: string[] = []let currentData = regionDatafor (const name of names) {const found = currentData?.find((item) => item.label === name)if (!found) breakcodes.push(found.value)currentData = found.children}return codes}

但是前端也可以在入参前使用使用codeToText做一个转换：

<el-form-item label="地区" prop="regionId"><el-cascader v-model="form.regionId" clearable :options="regionData" @change="changeCity" style="width: 100%"> </el-cascader>
</el-form-item>
-----------------------------------------------------function changeCity(value: any) {if (value) {form.regionName = codeToText?.[value[0]] + codeToText?.[value[1]] + codeToText?.[value[2]]}console.log(value)}