Element UI 中国省市区级联数据

演示效果 gif

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

文档地址

安装

1npm install element-china-area-data -S

在线示例

import 使用

1import {
2  provinceAndCityData,
3  pcTextArr,
4  regionData,
5  pcaTextArr,
6  codeToText,
7} from "element-china-area-data";

1. provinceAndCityData省市二级联动数据,汉字+code
2. regionData省市区三级联动数据
3. pcTextArr省市联动数据，纯汉字
4. pcaTextArr省市区联动数据，纯汉字
5. codeToText是个大对象，属性是区域码，属性值是汉字 用法例如：codeToText['110000']输出北京市

• 省市二级联动:

  1<template>
  2  <div id="app">
  3    <el-cascader
  4      size="large"
  5      :options="provinceAndCityData"
  6      v-model="selectedOptions">
  7    </el-cascader>
  8  </div>
  9</template>
  10
  11<script>
  12  import { provinceAndCityData } from 'element-china-area-data'
  13  export default {
  14    data () {
  15      return {
  16        provinceAndCityData,
  17        selectedOptions: []
  18      }
  19    },
  20  }
  21</script>

• 省市二级联动,纯汉字:

  1<template>
  2  <div id="app">
  3    <el-cascader
  4      size="large"
  5      :options="pcTextArr"
  6      v-model="selectedOptions">
  7    </el-cascader>
  8  </div>
  9</template>
  10
  11<script>
  12  import { pcTextArr } from 'element-china-area-data'
  13  export default {
  14    data () {
  15      return {
  16        pcTextArr,
  17        selectedOptions: []
  18      }
  19    },
  20  }
  21</script>

• 省市区三级联动

  1<template>
  2  <div id="app">
  3    <el-cascader
  4      size="large"
  5      :options="regionData"
  6      v-model="selectedOptions">
  7    </el-cascader>
  8  </div>
  9</template>
  10
  11<script>
  12  import { regionData } from 'element-china-area-data'
  13  export default {
  14    data () {
  15      return {
  16        regionData,
  17        selectedOptions: []
  18      }
  19    },
  20  }
  21</script>

• 省市区三级联动，纯汉字

  1<template>
  2  <div id="app">
  3    <el-cascader
  4      size="large"
  5      :options="pcaTextArr"
  6      v-model="selectedOptions">
  7    </el-cascader>
  8  </div>
  9</template>
  10
  11<script>
  12  import { pcaTextArr } from 'element-china-area-data'
  13  export default {
  14    data () {
  15      return {
  16        pcaTextArr,
  17        selectedOptions: []
  18      }
  19    },
  20  }
  21</script>

script 引入

1<script src="https://unpkg.com/element-china-area-data@6.0.0/dist/element-china-area-data.iife.js"></script>
2<script>
3  new Vue({
4    el: "#app",
5    data: function () {
6      return {
7        codeToText: elementChinaAreaData.codeToText,
8        provinceAndCityData: elementChinaAreaData.provinceAndCityData,
9        pcTextArr: elementChinaAreaData.pcTextArr,
10        regionData: elementChinaAreaData.regionData,
11        pcaTextArr: elementChinaAreaData.pcaTextArr,
12        selectedOptions1: ["11", "110101"],
13        selectedOptions2: ["12", "1201", "120101"],
14        selectedOptions3: ["北京市", "朝阳区"],
15        selectedOptions4: ["北京市", "市辖区", "朝阳区"],
16      };
17    },
18  });
19</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