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

一、省市区数据来源

百度了很多，只有一个官方数据来源是国家统计局官网的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传过来，但还是不行，这个没有明白为什么不成功。

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