element ui省市区三级联动-遇到的问题

最新推荐文章于 2025-06-30 09:32:22 发布

原创最新推荐文章于 2025-06-30 09:32:22 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#element ui #省市区三级联动

VUE 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何从国家统计局获取省市区数据，并利用mui框架的citypicker进行数据处理，将其转换为适用于Vue项目的json格式。同时，解决了表单数据格式不匹配导致的问题，实现了地址选择器的正确绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、省市区数据来源

百度了很多，只有一个官方数据来源是国家统计局官网的http://www.stats.gov.cn/tjsj/tjbz/tjyqhdmhcxhfdm/2017/11/01/110101.html，但是不是能直接用在代码中的，也看到了别人自己写的json格式，觉得都不是通用办法，后来看到了有用mui框架的city picker的data.city.js，我也就下了这个文件来使用。并改成了json文件。需要用外部文件引入vue文件中。
【点击去码云下载cityData.json】

二、省市区数据处理

通过正则表达式换掉文件与element ui的参数不同的地方。

let cities=JSON.parse(JSON.stringify(cityData).replace(/text/g,"label"));

将数据中的value值（原来为行政区划代码）改为中文对应值。

cities.forEach(function(val,index,array){
	val.value=val.label;
	if(val.children && val.children!==[]){
		val.children.forEach(function(cval,cindex,carray){
			cval.value=cval.label;
			if(cval.children && cval.children!==[]){
				cval.children.forEach(function(ccval,ccindex,ccarray){
					ccval.value=ccval.label;
              	});
			}
		});
	}
});

三、原来表单数据格式与现在不匹配导致报错

原来表单数据格式这一栏地址是字符串类型的，v-model直接绑定的值是数组类型的，直接用v-model="form.address"就会出问题。

尝试：不用v-model双向绑定，@change=“handleAddress”，handleAddress函数用参数e取值，将获得的值转成String类型再赋值给form数据。
但是这就有问题了，我这里的情况是点击“添加”按钮，跳出弹窗，输入地址的，这样操作就会导致：一次选中地址后，之后再打开弹窗地址栏就已经赋值成上次选中的地址了。
因此想给v-model绑定一个empty=[]的值，从父组件prop传过来，但还是不行，这个没有明白为什么不成功。

磨了很久，还是屈服了，把表单里地址的类型改成了数组类型，不影响显示。