element ui省市區三級聯動-遇到的問題
阿新 • • 發佈:2019-01-14
一、省市區資料來源
百度了很多,只有一個官方資料來源是國家統計局官網的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傳過來,但還是不行,這個沒有明白為什麼不成功。
磨了很久,還是屈服了,把表單裡地址的型別改成了陣列型別,不影響顯示。