-
-
Save afc163/7582f35654fd03d5be7009444345ea17 to your computer and use it in GitHub Desktop.
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; |
为什么我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 大兄弟,没有香港台湾!!!
自己用高德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 组件的选择。
感谢,有帮助~~
Live Demo: https://codesandbox.io/s/m4ljw91j0j
Based on china-division.