找了一个省市区三级的JSON数据,可以组装,分享如下
数据样例
省级数据
export const provinceList = [
{
text: '不限',
value: '100000'
},
{
text: '北京市',
value: '110000'
}, {
text: '天津市',
value: '120000'
}, {
text: '河北省',
value: '130000'
}, {
text: '山西省',
value: '140000'
}]
市级数据
export const cityList = {
'100000': [
{
province: '不限',
text: '不限',
value: '100100'
}
],
'110000': [
{
province: '北京市',
text: '北京市',
value: '110100'
}
],
'120000': [
{
province: '天津市',
text: '天津市',
value: '120100'
}
],
'130000': [
{
province: '河北省',
text: '石家庄市',
value: '130100'
},
{
province: '河北省',
text: '唐山市',
value: '130200'
},
{
province: '河北省',
text: '秦皇岛市',
value: '130300'
},
{
province: '河北省',
text: '邯郸市',
value: '130400'
}]
}
区级数据
export const areaList = {
'100100': [
{
city: '不限',
text: '不限',
value: '100101'
}
],
'110100': [
{
city: '市辖区',
text: '东城区',
value: '110101'
},
{
city: '市辖区',
text: '西城区',
value: '110102'
},
{
city: '市辖区',
text: '朝阳区',
value: '110105'
},
{
city: '市辖区',
text: '丰台区',
value: '110106'
},
{
city: '市辖区',
text: '石景山区',
value: '110107'
},
{
city: '市辖区',
text: '海淀区',
value: '110108'
},
{
city: '市辖区',
text: '门头沟区',
value: '110109'
},
{
city: '市辖区',
text: '房山区',
value: '110111'
},
{
city: '市辖区',
text: '通州区',
value: '110112'
},
{
city: '市辖区',
text: '顺义区',
value: '110113'
},
{
city: '市辖区',
text: '昌平区',
value: '110114'
},
{
city: '市辖区',
text: '大兴区',
value: '110115'
},
{
city: '市辖区',
text: '怀柔区',
value: '110116'
},
{
city: '市辖区',
text: '平谷区',
value: '110117'
},
{
city: '市辖区',
text: '密云区',
value: '110118'
},
{
city: '市辖区',
text: '延庆区',
value: '110119'
}
]
}
在页面中引入用法
import {provinceList, cityList, areaList} from "../../uitls/areaData";
const cityData = provinceList
cityData.forEach(province => {
// 组装省市区数据
province.children = cityList[province.value]
// 组装区数据
province.children.forEach(city => {
city.children = areaList[city.value]
})
})
此后就可以在省市区三级联动组件中使用这个Data了
// 这里采用的是cube-ui的写法
this.cityPicker = this.$createCascadePicker({
title: '选择城市',
data: cityData,
onSelect: this.citySelectHandle,
onCancel: this.cancelHandle
})
参考资料
查看cube-ui的此方法,传送门在此(滴滴出的移动端vue框架)
此完整数据可在本博客下载中心下载 点击下载