省市区三级联动JSON格式数据

找了一个省市区三级的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框架)

---

此完整数据可在本博客下载中心下载 点击下载