element china area data

Element UI Chinese province and city cascade data

Demonstration effect gif

Install

npm install element-china-area-data -S

Online example

import use

 import {
  provinceAndCityData ,
  pcTextArr ,
  regionData ,
  pcaTextArr ,
  codeToText ,
} from "element-china-area-data" ;

1. provinceAndCityData province and city secondary linkage data, Chinese characters + code
2. regionData three-level linkage data of provinces and municipalities
3. pcTextArr province and city linkage data, pure Chinese characters
4. pcaTextArr province and city linkage data, pure Chinese characters
5. codeToText is a large object, the attribute is the area code, and the attribute value is Chinese characters. For example: codeToText['110000'] outputs北京市

• Provincial and municipal second-level linkage:

   < 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>

• Province and city level two linkage, pure Chinese characters:

   < 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>

• Three-level linkage between provinces and municipalities

   < 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>

• Three-level linkage between provinces and municipalities, pure Chinese characters

   < 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 introduction

 < 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 > 

v6 changes

0. Switch to building with new scaffolding, supporting both CommonJS and ESM modules
1. ProvinceAndCityDataPlus/regionDataPlus/TextToCode has been removed. Please use the cascade component's own function to select all.
2. CodeToText is modified to codeToText
3. Added pure Chinese character data objects pcTextArr and pcaTextArr
4. Hong Kong, Macao and Taiwan are no longer supported, using the new data source https://github.com/modood/Administrative-divisions-of-China

Old version v5.0.2

Document address

Data source

Administrative-divisions-of-China

Develop test commands

• dev - starts dev server
• build - generates the following bundles: CommonJS (.cjs) ESM (.mjs) and IIFE (.iife.js). The name of bundle is automatically 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