CitySelect 中国，省，市，区县，乡联动选择
省市区数据
https://gist.github.com/afc163/7582f35654fd03d5be7009444345ea17
https://www.npmjs.com/package/china-division

CitySelect

image.png

  2. <CitySelect
  3.   // value={['53', '5329', '532901', '532901102']} // 'code'
  4.   value={['云南省', '大理白族自治州', '大理市', '大理镇']}// 'name'
  5.   onChange={(values: any[]) => console.log('city', values)}
  6.   // mode='name'
  7.   // gutter={0}
  8.   // level={2} // 省/市
  9. />

Cascader 省市区级联

image.png

  1. import { Cascader } from 'antd';
  2. import options from './cascader-address-options';
  4. function CitySelect() {
  5.     return (
  6.       <Cascader
  7.       options={options}
  8.       showSearch
  9.       placeholder="请选择地址"
  10.     />
  11.   )
  12. }
  14. export default CitySelect;

cascader-address-options.js

china-division 数据源 https://github.com/pansyjs/china-division

  1. import provinces from 'china-division/dist/provinces.json';
  2. import cities from 'china-division/dist/cities.json';
  3. import areas from 'china-division/dist/areas.json';
  5. areas.forEach((area) => {
  6.   const matchCity = cities.filter(city => city.code === area.cityCode)[0];
  7.   if (matchCity) {
  8.     matchCity.children = matchCity.children || [];
  9.     matchCity.children.push({
  10.       label: area.name,
  11.       value: area.code,
  12.     });
  13.   }
  14. });
  16. cities.forEach((city) => {
  17.   const matchProvince = provinces.filter(province => province.code === city.provinceCode)[0];
  18.   if (matchProvince) {
  19.     matchProvince.children = matchProvince.children || [];
  20.     matchProvince.children.push({
  21.       label: city.name,
  22.       value: city.code,
  23.       children: city.children,
  24.     });
  25.   }
  26. });
  28. const options = provinces.map(province => ({
  29.   label: province.name,
  30.   value: province.code,
  31.   children: province.children,
  32. }));
  34. export default options;

中国省市区数据

中华人民共和国行政区划（五级）：省级、地级、县级、乡级和村级
https://github.com/modood/Administrative-divisions-of-China

  1. 省份、直辖市、自治区；二级联动数据 pc-code.json
  2. 省份、城市、区县；三级联动数据 pca-code.json
  3. 省份、城市、区县、乡镇、街道；四级联动数据 pcas-code.json
  4. 村级 村委会居委会；五级联动

推荐 pcas-code.json，以上json数据都带 code编码

image.png

国家统计局区域代码

http://www.stats.gov.cn/tjsj/tjbz/tjyqhdmhcxhfdm

mysql五级行政区域数据

https://github.com/kakuilan/china_area_mysql

china_regions

https://github.com/wecatch/china_regions
最全最新中国省，市，地区 json 及 sql 数据
iview-area