【前端】Element-UI 省市縣級聯選擇器 JSON數據

轉載請註明出處：http://www.cnblogs.com/shamoyuu/p/element_cascader.html

 

不想本身處理的就直接下載吧

 http://shamoyuu.bj.bcebos.com/DontDelete/citys.json

 

效果圖

 

上一章咱們學會了用nodejs處理文件，這一章咱們就把數據處理成element-ui要求的格式，並保存到temp.txt文件

上代碼

var fs = require('fs'); fs.readFile('out.json', function(err, data) { if (err) { console.log('文件讀取失敗'); } else { console.log('文件讀取成功'); let citys = eval('(' + data + ')'); let province = []; // 全部省的jons，固定100000
        let provinceJson = citys['100000']; let provinceArr = []; for(let provinceKey in provinceJson) { let cityJson = citys[provinceKey]; console.info(provinceKey) let cityArr = []; for(let cityKey in cityJson) { let quJson = citys[cityKey]; let quArr = []; for(let qukey in quJson) { quArr.push({ value: qukey, label: quJson[qukey] }); } if(quArr.length == 0) { console.info(cityKey, cityJson[cityKey], "沒有區"); quArr.push({ value: cityKey, label: cityJson[cityKey] }); } cityArr.push({ value: cityKey, label: cityJson[cityKey], children: quArr }); } if(cityArr.length == 0) { console.info(provinceKey, provinceJson[provinceKey], "沒有市"); cityArr.push({ value: provinceKey, label: provinceJson[provinceKey], children: [{ value: provinceKey, label: provinceJson[provinceKey], }] }); } provinceArr.push({ value: provinceKey, label: provinceJson[provinceKey], children: cityArr }); } fs.writeFile('temp.txt', JSON.stringify(provinceArr), function(err) { if (err) { console.log('文件寫入失敗'); } else { console.log('文件寫入成功'); } }); } });

 

而後用nodejs運行這個js，就能夠獲得咱們想要的數據了

 

完結，散花