一、省市区数据来源
百度了很多,只有一个官方数据来源是国家统计局官网的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传过来,但还是不行,这个没有明白为什么不成功。
磨了很久,还是屈服了,把表单里地址的类型改成了数组类型,不影响显示。