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

This comment has been minimized.

Copy link
Owner 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

This comment has been minimized.

Copy link

chenxia123 commented Jul 3, 2017

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

@jasper-pan

This comment has been minimized.

Copy link

jasper-pan commented Sep 4, 2017

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

@MHwishes

This comment has been minimized.

Copy link

MHwishes commented Sep 19, 2017

thank you,很有用

@Ccheng2729111

This comment has been minimized.

Copy link

Ccheng2729111 commented Sep 22, 2017

用到了,谢谢。

@ZhengYingqian

This comment has been minimized.

Copy link

ZhengYingqian commented Dec 28, 2017

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

@catnipan

This comment has been minimized.

Copy link

catnipan commented Mar 19, 2018

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

@afc163

This comment has been minimized.

Copy link
Owner Author

afc163 commented Mar 25, 2018

@catnipan Thx, fixed

@fubobing126

This comment has been minimized.

Copy link

fubobing126 commented Mar 28, 2018

thank you

@qiuliang1

This comment has been minimized.

Copy link

qiuliang1 commented Apr 18, 2018

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

@lazyTai

This comment has been minimized.

Copy link

lazyTai commented Nov 27, 2018

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

@lazyTai

This comment has been minimized.

Copy link

lazyTai commented Nov 27, 2018

@yuyichen

This comment has been minimized.

Copy link

yuyichen commented Feb 13, 2019

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

@sojitao

This comment has been minimized.

Copy link

sojitao commented Apr 22, 2019

如果要做国际化,怎么办

@zarkin404

This comment has been minimized.

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

This comment has been minimized.

Copy link

kiinlam commented Oct 24, 2019

如果要做国际化,怎么办

弄个中文转拼音的,哈哈

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.