vue element-ui realiza ligação de três níveis entre províncias e municípios

1. Elemento UI Dados em cascata de províncias e cidades chinesas

1. Endereço oficial

https://www.npmjs.com/package/element-china-area-data

2. Instalação

npm install element-china-area-data -S

3. Uso

import {
    
     provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'

1. provinAndCityData são dados de ligação secundária de província e cidade (sem a opção "todos")
2. regionData são os dados de ligação de três níveis de províncias e cidades (sem a opção "todos")
3. provinAndCityDataPlus são os dados de ligação de três níveis de províncias e cidades (com a opção "todos")
4. regionDataPlus são os dados de ligação de três níveis de províncias e cidades (com a opção "todos")
5. O valor vinculado a "todas" as opções é uma string vazia ""
6. 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 a cidade de Pequim
7. TextToCode é um objeto grande, o atributo contém caracteres chineses e o valor do atributo é o uso do código de área, por exemplo: TextToCode['Beijing City'].code output 110000, TextToCode['Beijing City']['distrito municipal'] .código de saída 110100, TextToCode['Pequim']['distrito da cidade']['Distrito de Chaoyang'].código de saída 110105

2. Ligação de três níveis entre províncias e municípios (sem a opção “todos”) – Exemplo

<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange">
    </el-cascader>
  </div>
</template>
 
<script>
  import {
      
       regionData } from 'element-china-area-data'
  export default {
      
      
    data () {
      
      
      return {
      
      
        options: regionData,
        selectedOptions: []
      }
    },
 
    methods: {
      
      
      handleChange (value) {
      
      
        console.log(value)
      }
    }
  }
</script>

Imprimir resultado
Imprime o valor do código do endereço selecionado

3. Realize ligação de três níveis e eco de dados

1. Defina os dados em troca

	// 省市区三级联动
	provinces: "",
	city: "",
	area: "",
	options: regionData,
	selectedOptions: [],

2. Execute a vinculação de dados na tag el-form-item

<el-form-item label="地址" prop="address">
 	<el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange"/>
</el-form-item>

3. Execute a atribuição de dados no método de métodos

// 省市区三级联动
    handleChange(value){
    
    
      console.log(value);
      if (value[1] != null && value[2] != null){
    
    
        var addressText = CodeToText[value[0]] + '/' + CodeToText[value[1]] + '/' +  CodeToText[value[2]]
      }else {
    
    
        if (value[1] != null){
    
    
          addressText = CodeToText[value[0]] + '/' + CodeToText[value[1]]
        }else {
    
    
          addressText =  CodeToText[value[0]]
        }
      }
      this.form.address = addressText;
      console.log(this.address)
      this.provinces = CodeToText[this.selectedOptions[0]]
      this.city = CodeToText[this.selectedOptions[1]]
      this.area = CodeToText[this.selectedOptions[2]]
    },

4. Eco de dados:
eco dos dados no método de modificação

handleUpdate(row) {
    
    
      this.reset();
      console.log(row);
      const userId = row.userId || this.ids
      getUser(userId).then(response => {
    
    
        this.form = response.data;
        // 省市区三级联动
        if (response.data.address != null &&  response.data.address != ''){
    
    
          let StringAddress = response.data.address.split("/");
          if (StringAddress[1] != null && StringAddress[2] != null){
    
    
            this.provinces = StringAddress[0];
            this.city = StringAddress[1];
            this.area = StringAddress[2];
            this.selectedOptions = [
              TextToCode[this.provinces].code,
              TextToCode[this.provinces][this.city].code,
              TextToCode[this.provinces][this.city][this.area].code
            ]
          }else {
    
    
            if (StringAddress[1] != null){
    
    
              this.provinces = StringAddress[0];
              this.city = StringAddress[1];
              this.selectedOptions = [
                TextToCode[this.provinces].code,
                TextToCode[this.provinces][this.city].code
              ]
            }else {
    
    
              this.provinces  = StringAddress[0];
              this.selectedOptions = [
                TextToCode[this.provinces].code
              ]
            }
          }
        }

        this.open = true;
        this.title = "修改用户信息";
      });
    },

5. Adicione a redefinição das informações de selectOptions no método de redefinição do formulário em métodos

this.selectedOptions = [];