element china area data

Element UI 中國省市區級聯數據

示範效果gif

安裝

npm install element-china-area-data -S

線上範例

import 使用

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

1. provinceAndCityData省市二級連動資料,漢字+code
2. regionData省市區三級連動數據
3. pcTextArr省市連動數據，純漢字
4. pcaTextArr省市區連動數據，純漢字
5. 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 > 

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

文件地址

數據來源

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