Address options for antd cascader

cascader-address-options.js

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;

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);

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

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

thank you,很有用

用到了，谢谢。

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

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

@catnipan Thx, fixed

thank you

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

@afc163 大兄弟，没有香港台湾！！！

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

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

如果要做国际化，怎么办

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 组件的选择。

如果要做国际化，怎么办

弄个中文转拼音的，哈哈

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

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

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

这个过时了，没办法拉下来就使用，我写了个新的

import React from "react";
import ReactDOM from "react-dom";
import {Cascader} from "antd";

import areas from "china-division/dist/areas.json";
import cities from "china-division/dist/cities.json";
import provinces from "china-division/dist/provinces.json";

// 定义接口
interface Area {
    code: string;
    name: string;
    cityCode?: string;
}

interface City {
    code: string;
    name: string;
    provinceCode: string;
    children?: AreaOption[];
}

interface Province {
    code: string;
    name: string;
    children?: CityOption[];
}

interface AreaOption {
    label: string;
    value: string;
}

interface CityOption extends AreaOption {
    children?: AreaOption[];
}

// 将原始数据转换为带有 children 属性的类型
const typedCities: City[] = cities.map((city) => ({...city, children: []}));
const typedProvinces: Province[] = provinces.map((province) => ({
    ...province,
    children: []
}));
const typedAreas: Area[] = areas.map((area) => ({...area}));

typedAreas.forEach((area) => {
    const matchCity = typedCities.find((city) => city.code === area.cityCode);
    if (matchCity) {
        matchCity.children!.push({
            label: area.name,
            value: area.code
        });
    }
});

typedCities.forEach((city) => {
    const matchProvince = typedProvinces.find(
        (province) => province.code === city.provinceCode
    );
    if (matchProvince) {
        matchProvince.children!.push({
            label: city.name,
            value: city.code,
            children: city.children
        });
    }
});

const options = typedProvinces.map((province) => ({
    label: province.name,
    value: province.code,
    children: province.children
}));

ReactDOM.render(
    <div style={{margin: 24}}>
        <p style={{marginBottom: 24}}>Antd Cascader Demo</p>
        <Cascader
            options={options}
            showSearch
            placeholder="请选择地址"
            style={{width: 400}}
        />
    </div>,
    document.getElementById("root")
);

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 组件的选择。

感谢，有帮助~~