element china area data

Element UI Dados em cascata de províncias e cidades chinesas

Gif de efeito de demonstração

Instalar

npm install element-china-area-data -S

Exemplo on-line

uso de importação

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

1. provinceAndCityData dados de ligação secundária de província e cidade, caracteres chineses + código
2. regionData dados de ligação de três níveis de províncias e municípios
3. dados de ligação de província e cidade pcTextArr , caracteres chineses puros
4. dados de ligação de província e cidade pcaTextArr , caracteres chineses puros
5. codeToText é um objeto grande, o atributo é o código de área e o valor do atributo são caracteres chineses. Por exemplo: codeToText['110000'] gera北京市.

• Articulação de segundo nível provincial e 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>

• Ligação de nível dois de província e cidade, caracteres chineses 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>

• Ligação de três níveis entre províncias e municípios

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

• Ligação de três níveis entre províncias e municípios, caracteres chineses 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>

introdução do roteiro

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

mudanças na v6

0. Mude para a construção com novos andaimes, com suporte para módulos CommonJS e ESM
1. ProvinceAndCityDataPlus/regionDataPlus/TextToCode foi removido. Use a própria função do componente em cascata para selecionar tudo.
2. CodeToText é modificado para codeToText
3. Adicionados objetos de dados de caracteres chineses puros pcTextArr e pcaTextArr
4. Hong Kong, Macau e Taiwan não são mais suportados, usando a nova fonte de dados https://github.com/modood/Administrative-divisions-of-China

Versão antiga v5.0.2

Endereço do documento

Fonte de dados

Divisões administrativas da China

Desenvolva comandos de teste

• dev - inicia o servidor de desenvolvimento
• build - gera os seguintes pacotes: CommonJS (.cjs) ESM (.mjs) e IIFE (.iife.js). O nome do pacote é obtido automaticamente da propriedade de nome package.json.
• test - inicia o vitest e executa todos os testes
• test:coverage - inicia o vitest e executa todos os testes com relatório de cobertura de código
• lint:scripts - arquivos lint .ts com eslint
• lint:styles - arquivos lint .css e .scss com stylelint
• format:scripts - formate arquivos .ts, .html e .json com mais beleza
• format:styles - formate arquivos .cs e .scss com stylelint
• format - formate tudo com mais bonito e stylelint
• prepare - script para configurar o gancho de pré-commit husky
• desinstalar-husky - script para remover husky do repositório