【antd】省市区级联下拉选择

antd-pro 封装省市区级联组件

• 获得中国省市区数据,安装地址库

yarn add china-division

• 新建一个级联组件组件

import styles from './index.less';
import type { FC } from 'react';
import { Cascader } from "antd";
import provinces from "china-division/dist/provinces";
import cities from "china-division/dist/cities";
import areas from "china-division/dist/areas";

type AntdInputProps = {
  placeholder?: string;
  onChangeProps?: (v: any) => void;
  allowClear?: boolean;
};

const AntdCascader: FC<AntdInputProps> = (props) => {
  const {
    placeholder = '请选择省市区',
    onChangeProps,
    allowClear = true,
  } = props;

  console.log(cities);

areas.forEach((area: { cityCode: string; name: string; code: any; },id: number) => {
  const matchCity = cities.filter((city: { code: string; }) => city.code === area.cityCode)[0];
  if (matchCity) {
    matchCity.children = matchCity.children || [];
    matchCity.children.push({
      label: area.name,
      value: area.code,
      id
    });
  }
});

cities.forEach((city: { provinceCode: any; name: string; string: any; children: any; code?: string },id: number) => {
  const matchProvince = provinces.filter(
    (    province: { code: string; }) => province.code === city.provinceCode
  )[0];
  if (matchProvince) {
    matchProvince.children = matchProvince.children || [];
    matchProvince.children.push({
      label: city.name,
      value: city.code,
      id,
      children: city.children
    });
  }
});

const options = provinces.map((province: { name: any; code: any; children: any; },id: number) => ({
  label: province.name,
  value: province.code,
  id,
  children: province.children
}));

// console.log('options',options);

  return (
    <div className={styles['cascader-wrap']}>
      <Cascader
        options={options}
        showSearch
        placeholder={placeholder}
        onChange={onChangeProps}
        allowClear={allowClear}
      />
    </div>
  );
};

export default AntdCascader;