Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Plortinus/element-china-area-data
:cn: Element UI && antd Cascader级联选择器 中国省市区三级、二级联动option数据
https://github.com/Plortinus/element-china-area-data
address administrative-divisions administrative-divisions-of-china antdesign area china china-area-data city element-ui province vue
Last synced: 3 months ago
JSON representation
:cn: Element UI && antd Cascader级联选择器 中国省市区三级、二级联动option数据
- Host: GitHub
- URL: https://github.com/Plortinus/element-china-area-data
- Owner: Plortinus
- License: mit
- Created: 2017-03-01T06:10:33.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-12-14T05:56:30.000Z (11 months ago)
- Last Synced: 2024-05-29T12:51:15.492Z (6 months ago)
- Topics: address, administrative-divisions, administrative-divisions-of-china, antdesign, area, china, china-area-data, city, element-ui, province, vue
- Language: TypeScript
- Homepage: https://plortinus.github.io/element-china-area-data/index.html
- Size: 5.52 MB
- Stars: 1,248
- Watchers: 22
- Forks: 212
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Element UI 中国省市区级联数据
[](https://www.npmjs.com/package/element-china-area-data)    
## 演示效果 gif
## 安装
```bash
npm install element-china-area-data -S
```
[在线示例](https://plortinus.github.io/element-china-area-data/index.html)
## import 使用
```js
import {
provinceAndCityData,
pcTextArr,
regionData,
pcaTextArr,
codeToText,
} from "element-china-area-data";
```
1. `provinceAndCityData`省市二级联动数据,汉字+code
2. `regionData`省市区三级联动数据
3. `pcTextArr`省市联动数据，纯汉字
4. `pcaTextArr`省市区联动数据，纯汉字
5. `codeToText`是个大对象，属性是区域码，属性值是汉字 用法例如：`codeToText['110000']`输出`北京市`
- 省市二级联动:
```js
import { provinceAndCityData } from 'element-china-area-data'
export default {
data () {
return {
provinceAndCityData,
selectedOptions: []
}
},
}
```
- 省市二级联动,纯汉字:
```js
import { pcTextArr } from 'element-china-area-data'
export default {
data () {
return {
pcTextArr,
selectedOptions: []
}
},
}
```
- 省市区三级联动
```js
import { regionData } from 'element-china-area-data'
export default {
data () {
return {
regionData,
selectedOptions: []
}
},
}
```
- 省市区三级联动，纯汉字
```js
import { pcaTextArr } from 'element-china-area-data'
export default {
data () {
return {
pcaTextArr,
selectedOptions: []
}
},
}
```
## script 引入
```html
new Vue({
el: "#app",
data: function () {
return {
codeToText: elementChinaAreaData.codeToText,
provinceAndCityData: elementChinaAreaData.provinceAndCityData,
pcTextArr: elementChinaAreaData.pcTextArr,
regionData: elementChinaAreaData.regionData,
pcaTextArr: elementChinaAreaData.pcaTextArr,
selectedOptions1: ["11", "110101"],
selectedOptions2: ["12", "1201", "120101"],
selectedOptions3: ["北京市", "朝阳区"],
selectedOptions4: ["北京市", "市辖区", "朝阳区"],
};
},
});
```
## v6 改动
0. 改用全新脚手架构建，同时支持 CommonJS 和 ESM modules
1. 去掉了 provinceAndCityDataPlus/regionDataPlus/TextToCode，全选功能请利用级联组件自身的
2. CodeToText 修改为 codeToText
3. 添加了纯汉字的数据对象 pcTextArr 和 pcaTextArr
4. 不再支持港澳台，使用新的数据源https://github.com/modood/Administrative-divisions-of-China
## 旧版本 v5.0.2
[文档地址](./V5.MD)
## 数据来源
[Administrative-divisions-of-China](https://github.com/modood/Administrative-divisions-of-China)
## 开发测试命令
- dev - starts dev server
- build - generates the following bundles: CommonJS (.cjs) ESM (.mjs) and IIFE (.iife.js). The name of bundle isautomatically taken from package.json name property
- test - starts vitest and runs all tests
- test:coverage - starts vitest and run all tests with code coverage report
- lint:scripts - lint .ts files with eslint
- lint:styles - lint .css and .scss files with stylelint
- format:scripts - format .ts, .html and .json files with prettier
- format:styles - format .cs and .scss files with stylelint
- format - format all with prettier and stylelint
- prepare - script for setting up husky pre-commit hook
- uninstall-husky - script for removing husky from repository