element-china-area-data
v6.1.0
Published
[![npm](https://img.shields.io/npm/v/element-china-area-data.svg)](https://www.npmjs.com/package/element-china-area-data) ![npm](https://img.shields.io/npm/dw/element-china-area-data) ![GitHub top language](https://img.shields.io/github/languages/top/Plor
Downloads
8,118
Maintainers
Readme
Element UI 中国省市区级联数据
演示效果 gif
v6 改动
- 改用全新脚手架构建,同时支持 CommonJS 和 ESM modules
- 去掉了 provinceAndCityDataPlus/regionDataPlus/TextToCode,全选功能请利用级联组件自身的
- CodeToText 修改为 codeToText
- 添加了纯汉字的数据对象 pcTextArr 和 pcaTextArr
- 不再支持港澳台,使用新的数据源https://github.com/modood/Administrative-divisions-of-China
旧版本 v5.0.2
安装
npm install element-china-area-data -S
import 使用
import {
provinceAndCityData,
pcTextArr,
regionData,
pcaTextArr,
codeToText,
} from "element-china-area-data";
provinceAndCityData
省市二级联动数据,汉字+coderegionData
省市区三级联动数据pcTextArr
省市联动数据,纯汉字pcaTextArr
省市区联动数据,纯汉字codeToText
是个大对象,属性是区域码,属性值是汉字 用法例如:codeToText['110000']
输出北京市
省市二级联动:
<template> <div id="app"> <el-cascader size="large" :options="provinceAndCityData" v-model="selectedOptions"> </el-cascader> </div> </template> <script> import { provinceAndCityData } from 'element-china-area-data' export default { data () { return { provinceAndCityData, selectedOptions: [] } }, } </script>
省市二级联动,纯汉字:
<template> <div id="app"> <el-cascader size="large" :options="pcTextArr" v-model="selectedOptions"> </el-cascader> </div> </template> <script> import { pcTextArr } from 'element-china-area-data' export default { data () { return { pcTextArr, selectedOptions: [] } }, } </script>
省市区三级联动
<template> <div id="app"> <el-cascader size="large" :options="regionData" v-model="selectedOptions"> </el-cascader> </div> </template> <script> import { regionData } from 'element-china-area-data' export default { data () { return { regionData, selectedOptions: [] } }, } </script>
省市区三级联动,纯汉字
<template> <div id="app"> <el-cascader size="large" :options="pcaTextArr" v-model="selectedOptions"> </el-cascader> </div> </template> <script> import { pcaTextArr } from 'element-china-area-data' export default { data () { return { pcaTextArr, selectedOptions: [] } }, } </script>
script 引入
<script src="https://unpkg.com/[email protected]/dist/element-china-area-data.iife.js"></script>
<script>
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: ["北京市", "市辖区", "朝阳区"],
};
},
});
</script>
数据来源
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