Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Address options for antd cascader
import provinces from 'china-division/dist/provinces.json';
import cities from 'china-division/dist/cities.json';
import areas from 'china-division/dist/areas.json';
areas.forEach((area) => {
const matchCity = cities.filter(city => city.code === area.cityCode)[0];
if (matchCity) {
matchCity.children = matchCity.children || [];
matchCity.children.push({
label: area.name,
value: area.code,
});
}
});
cities.forEach((city) => {
const matchProvince = provinces.filter(province => province.code === city.provinceCode)[0];
if (matchProvince) {
matchProvince.children = matchProvince.children || [];
matchProvince.children.push({
label: city.name,
value: city.code,
children: city.children,
});
}
});
const options = provinces.map(province => ({
label: province.name,
value: province.code,
children: province.children,
}));
export default options;
@afc163
Copy link
Author

afc163 commented Feb 15, 2017

Live Demo: https://codesandbox.io/s/m4ljw91j0j

Based on china-division.

import { Cascader } from 'antd';
import options from './cascader-address-options';

ReactDOM.render(<Cascader options={options} />, mountNode);

@chenxia123
Copy link

chenxia123 commented Jul 3, 2017

为什么我npm install 了china-division, 但是import provinces from 'china-division/dist/provinces.json';的时候,并没有把数据引用过来,返回值是一个{}??

@jasper-pan
Copy link

jasper-pan commented Sep 4, 2017

我也遇到你的问题,因为没有json-loader,webpack打包不识别json文件,npm install json-loader后再webpack里配置下就ok了

@MHwishes
Copy link

MHwishes commented Sep 19, 2017

thank you,很有用

@Ccheng2729111
Copy link

Ccheng2729111 commented Sep 22, 2017

用到了,谢谢。

@ZhengYingqian
Copy link

ZhengYingqian commented Dec 28, 2017

这个貌似是React的调用方式,请问在Angular里面怎么调用这个包?

@catnipan
Copy link

catnipan commented Mar 19, 2018

最新的 china-division (2.0.0) 数据字段有变化,上面行6的 parent_code 应为 cityCode,行17的 parent_code 应为 provinceCode

@afc163
Copy link
Author

afc163 commented Mar 25, 2018

@catnipan Thx, fixed

@fubobing126
Copy link

fubobing126 commented Mar 28, 2018

thank you

@qiuliang1
Copy link

qiuliang1 commented Apr 18, 2018

请问这个只能用npm install china-division下载引入吗

@lazyTai
Copy link

lazyTai commented Nov 27, 2018

@afc163 大兄弟,没有香港台湾!!!

@lazyTai
Copy link

lazyTai commented Nov 27, 2018

@yuyichen
Copy link

yuyichen commented Feb 13, 2019

自己用高德api封装了一个组件,写完才看到antd Cascader文档最下面的一行小字

@sojitao
Copy link

sojitao commented Apr 22, 2019

如果要做国际化,怎么办

@zarkin404
Copy link

zarkin404 commented Aug 26, 2019

https://gitee.com/lazytai/codes/sqwk1nbtrp5gae7u463fz41
加了香港台湾的,试试!

其实 china-division 这个包已经包含了港澳台行政区了,只不过没有行政区编码,可以在一楼的基础上用下面的代码插入港澳台地区的行政区:

import hkmotw from 'china-division/dist/HK-MO-TW.json'

// 合并港澳台行政区
const _hkmotw = Object.entries(hkmotw).map(([provinceName, provinceItem]) => {
  return {
    label: provinceName,
    value: (Math.random() * 1e10).toFixed(),
    children: Object.entries(provinceItem).map(([cityName, cityItem]) => {
      return {
        label: cityName,
        value: (Math.random() * 1e10).toFixed(),
        children: cityItem.map(area => {
          return {
            label: area,
            value: (Math.random() * 1e10).toFixed()
          }
        })
      }
    })
  }
})

options = options.concat(_hkmotw)

value 为随机生成的数字,避免影响 cascader 组件的选择。

@kiinlam
Copy link

kiinlam commented Oct 24, 2019

如果要做国际化,怎么办

弄个中文转拼音的,哈哈

@chenglianjie
Copy link

chenglianjie commented Sep 17, 2020

发现选择其他省时,上滑要出现上一省的数据 。这是个bug嘛

@wangxingkang
Copy link

wangxingkang commented Dec 2, 2020

https://github.com/pansyjs/china-division 提供了jsonjs两种格式的数据,包含了香港、澳门、台湾,基于china-division提供的数据

@LiHongyao
Copy link

LiHongyao commented Jun 22, 2021

这个拿到了code怎么回显啊,不在cascader组件上回显。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment