需求
最近在做關(guān)于地區(qū)的的選擇撒穷，使用的是element-ui中的el-cascader級聯(lián)選擇器控件，要按照大區(qū)->省->市這種關(guān)系進行組合敛纲，控件需要的內(nèi)容是：
[{
value: 'zhinan',
label: '指南',
children: [{
value: 'shejiyuanze',
label: '設(shè)計原則',
children: [{
value: 'yizhi',
label: '一致'
}, {
value: 'fankui',
label: '反饋'
}, {
value: 'xiaolv',
label: '效率'
}, {
value: 'kekong',
label: '可控'
}]
}, {
value: 'daohang',
label: '導(dǎo)航',
children: [{
value: 'cexiangdaohang',
label: '側(cè)向?qū)Ш?
}, {
value: 'dingbudaohang',
label: '頂部導(dǎo)航'
}]
}]
}, {
value: 'zujian',
label: '組件',
children: [{
value: 'basic',
label: 'Basic',
children: [{
value: 'layout',
label: 'Layout 布局'
}, {
value: 'color',
label: 'Color 色彩'
}, {
value: 'typography',
label: 'Typography 字體'
}, {
value: 'icon',
label: 'Icon 圖標(biāo)'
}, {
value: 'button',
label: 'Button 按鈕'
}]
}, {
value: 'form',
label: 'Form',
children: [{
value: 'radio',
label: 'Radio 單選框'
}, {
value: 'checkbox',
label: 'Checkbox 多選框'
}, {
value: 'input',
label: 'Input 輸入框'
}, {
value: 'input-number',
label: 'InputNumber 計數(shù)器'
}, {
value: 'select',
label: 'Select 選擇器'
}, {
value: 'cascader',
label: 'Cascader 級聯(lián)選擇器'
}, {
value: 'switch',
label: 'Switch 開關(guān)'
}, {
value: 'slider',
label: 'Slider 滑塊'
}, {
value: 'time-picker',
label: 'TimePicker 時間選擇器'
}, {
value: 'date-picker',
label: 'DatePicker 日期選擇器'
}, {
value: 'datetime-picker',
label: 'DateTimePicker 日期時間選擇器'
}, {
value: 'upload',
label: 'Upload 上傳'
}, {
value: 'rate',
label: 'Rate 評分'
}, {
value: 'form',
label: 'Form 表單'
}]
}]
解決辦法
我使用的是Administrative-divisions-of-China這個庫的數(shù)據(jù)遣钳，但是沒有大區(qū)的，所以首先定義大區(qū)(自己定義)
region.json
// provinces:省的code碼
[{
"code": "10001",
"name": "東北",
"provinces": ["21", "22", "23"]
}, {
"code": "10002",
"name": "華東",
"provinces": ["31", "32", "33", "34", "35", "36", "37"]
}, {
"code": "10003",
"name": "華北",
"provinces": ["11", "12", "13", "14", "15"]
}, {
"code": "10004",
"name": "華中",
"provinces": ["41", "42", "43"]
}, {
"code": "10005",
"name": "華南",
"provinces": ["44", "45", "46"]
}, {
"code": "10006",
"name": "西南",
"provinces": ["50", "51", "52", "53", "54"]
}, {
"code": "10007",
"name": "西北",
"provinces": ["61", "62", "63", "64", "65"]
}]
省和市的json在Administrative-divisions-of-China中可以下載肃叶，因為不需要用到直轄市的區(qū)，所以我分別下載省級和地級的json文件十嘿，自己拼接了
image
index.js代碼如下
var fs = require("fs");
var cityFile = "./city.json";
var provincesFile = "./provinces.json";
var regionFile = "./region.json";
//同步加載json文件
var cityRes = JSON.parse(fs.readFileSync(cityFile));
var provincesRes = JSON.parse(fs.readFileSync(provincesFile));
var regionRes = JSON.parse(fs.readFileSync(regionFile));
//組合省和市的數(shù)據(jù)
var arr = provincesRes.map(provincesVal => {
provincesVal.children = [];
cityRes.map(cityVal => {
if (provincesVal.code === cityVal.provinceCode) {
delete cityVal.provinceCode;
provincesVal.children.push(cityVal);
}
});
return provincesVal;
});
//組合大區(qū)因惭、省和市的數(shù)據(jù)
var address = regionRes.map(val => {
val.children = [];
val.provinces.forEach(element => {
arr.map(val1 => {
if (element === val1.code) {
val.children.push(val1);
}
});
});
delete val.provinces;
return val;
});
//把數(shù)據(jù)寫入文件
fs.writeFile("address.json", JSON.stringify(address), function(err) {
if (err) {
return console.error(err);
}
console.log("數(shù)據(jù)寫入成功！");
fs.readFile("address.json", function(err, data) {
if (err) {
return console.error(err);
}
console.log("異步讀取文件數(shù)據(jù): " + data.toString());
});
});
使用
執(zhí)行
node index.js
因為生成json中的key跟控件中不一樣绩衷，這邊我直接使用編譯器去全局替換了
code --> value
name --> label
最后導(dǎo)入json文件使用,效果如下
image
