element china area data

Données en cascade de la province et de la ville chinoises de l'interface utilisateur de l'élément

Gif d'effet de démonstration

Installer

npm install element-china-area-data -S

Exemple en ligne

utilisation d'importation

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

1. provinceAndCityData Données de liaison secondaire de province et de ville, caractères chinois + code
2. regionData données de couplage à trois niveaux des provinces et des municipalités
3. Données de liaison entre les provinces et les villes pcTextArr , caractères chinois purs
4. Données de liaison entre les provinces et les villes pcaTextArr , caractères chinois purs
5. codeToText est un objet volumineux, l'attribut est l'indicatif régional et la valeur de l'attribut est constituée de caractères chinois. Par exemple : codeToText['110000'] génère北京市.

• Liens provinciaux et municipaux de deuxième niveau :

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

• Liaison au niveau de la province et de la ville, caractères chinois purs :

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

• Lien à trois niveaux entre les provinces et les municipalités

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

• Lien à trois niveaux entre provinces et municipalités, caractères chinois purs

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

introduction au scénario

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

changements v6

0. Passez à la construction avec de nouveaux échafaudages, prenant en charge les modules CommonJS et ESM
1. ProvinceAndCityDataPlus/regionDataPlus/TextToCode a été supprimé. Veuillez utiliser la propre fonction du composant cascade pour tout sélectionner.
2. CodeToText est modifié en codeToText
3. Ajout des objets de données en caractères chinois purs pcTextArr et pcaTextArr
4. Hong Kong, Macao et Taiwan ne sont plus pris en charge, en utilisant la nouvelle source de données https://github.com/modood/Administrative-divisions-of-China

Ancienne version v5.0.2

Adresse du document

Source de données

Divisions-administratives-de-Chine

Développer des commandes de test

• dev - démarre le serveur de développement
• build - génère les bundles suivants : CommonJS (.cjs) ESM (.mjs) et IIFE (.iife.js). Le nom du bundle est automatiquement extrait de la propriété de nom package.json.
• test - démarre Vitest et exécute tous les tests
• test:coverage - démarre vitest et exécute tous les tests avec le rapport de couverture de code
• lint:scripts - fichiers lint .ts avec eslint
• lint: styles - fichiers lint .css et .scss avec stylelint
• format:scripts - formatez les fichiers .ts, .html et .json avec plus joli
• format:styles - formater les fichiers .cs et .scss avec stylelint
• format - formatez le tout avec plus joli et stylelint
• préparer - script pour configurer le hook de pré-commit Husky
• uninstall-husky - script pour supprimer Husky du référentiel