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) return
		await 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 = regionData

		for (const name of names) {
			const found = currentData?.find((item) => item.label === name)
			if (!found) break

			codes.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)
	}

5、视频演示