vue element-ui logra un vínculo de tres niveles entre provincias y municipios

1. Datos en cascada de ciudades y provincias chinas de Element UI

1. Dirección oficial

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

2. Instalación

npm install element-china-area-data -S

3. uso

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

1. provinciaAndCityData son datos de enlace secundario de provincia y ciudad (sin la opción "todos")
2. regionData son los datos de vinculación de tres niveles de provincias y ciudades (sin la opción "todos")
3. provinciaAndCityDataPlus son los datos de vinculación de tres niveles de provincias y ciudades (con la opción "todos")
4. regionDataPlus son los datos de vinculación de tres niveles de provincias y ciudades (con la opción "todos")
5. El valor vinculado a "todas" las opciones es una cadena vacía ""
6. 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 la ciudad de Beijing
7. TextToCode es un objeto grande, el atributo son caracteres chinos y el valor del atributo es el uso del código de área. Por ejemplo: TextToCode ['Ciudad de Beijing']. Salida del código 110000, TextToCode ['Ciudad de Beijing'] ['distrito municipal'] .code salida 110100, TextToCode[' Ciudad de Beijing']['Distrito municipal']['Distrito de Chaoyang'].salida de código 110105

2. Vínculo de tres niveles entre provincias y municipios (sin la opción “todos”) – Ejemplo

<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 el valor del código de la dirección seleccionada

3. Realizar vínculos de tres niveles y eco de datos.

1. Definir datos a cambio

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

2. Realice el enlace de datos en la etiqueta el-form-item

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

3. Realizar la asignación de datos en el 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 datos:
repite los datos en el método de modificación.

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. Agregue el restablecimiento de la información de opciones seleccionadas en el formulario método de restablecimiento en métodos.

this.selectedOptions = [];