element china area data

Datos en cascada de ciudades y provincias chinas de Element UI

Efecto de demostración gif.

Instalar

npm install element-china-area-data -S

Ejemplo en línea

uso de importación

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

1. provinceAndCityData datos de enlace secundario de provincia y ciudad, caracteres chinos + código
2. regionData datos de vinculación de tres niveles de provincias y municipios
3. pcTextArr datos de vinculación de provincia y ciudad, caracteres chinos puros
4. pcaTextArr datos de vinculación de provincia y ciudad, caracteres chinos puros
5. codeToText es un objeto grande, el atributo es el código de área y el valor del atributo son caracteres chinos. Por ejemplo: codeToText['110000'] genera北京市.

• Vinculación de segundo nivel provincial y municipal:

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

• Vinculación a nivel dos de provincia y ciudad, caracteres chinos puros:

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

• Vínculo de tres niveles entre provincias y municipios

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

• Vínculo de tres niveles entre provincias y municipios, caracteres chinos puros

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

introducción del guión

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

cambios v6

0. Cambie a la construcción con nuevos andamios, compatibles con los módulos CommonJS y ESM
1. ProvinceAndCityDataPlus/regionDataPlus/TextToCode se ha eliminado. Utilice la función propia del componente en cascada para seleccionar todo.
2. CodeToText se modifica a codeToText
3. Se agregaron objetos de datos de caracteres chinos puros pcTextArr y pcaTextArr.
4. Hong Kong, Macao y Taiwán ya no son compatibles, utilizando la nueva fuente de datos https://github.com/modood/Administrative-divisions-of-China

Versión anterior v5.0.2

Dirección del documento

fuente de datos

Divisiones-administrativas-de-China

Desarrollar comandos de prueba.

• dev - inicia el servidor de desarrollo
• build: genera los siguientes paquetes: CommonJS (.cjs) ESM (.mjs) y IIFE (.iife.js). El nombre del paquete se toma automáticamente de la propiedad de nombre package.json.
• prueba: inicia vitest y ejecuta todas las pruebas
• prueba: cobertura: inicia vitest y ejecuta todas las pruebas con el informe de cobertura del código
• lint:scripts - archivos lint .ts con eslint
• lint:styles - archivos lint .css y .scss con stylelint
• format:scripts - formatee archivos .ts, .html y .json con archivos más bonitos
• format:styles - formatea archivos .cs y .scss con stylelint
• formato - formatea todo con más bonito y stylelint
• preparar: script para configurar el gancho de confirmación previa de Husky
• uninstall-husky: script para eliminar husky del repositorio