vue element-ui 实现省市区三级联动

一、Element UI 中国省市区级联数据

1、官方地址

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

2、安装

npm install element-china-area-data -S

3、使用

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

1. provinceAndCityData是省市二级联动数据（不带“全部”选项）
2. regionData是省市区三级联动数据（不带“全部”选项）
3. provinceAndCityDataPlus是省市区三级联动数据（带“全部”选项）
4. regionDataPlus是省市区三级联动数据（带“全部”选项）
5. “全部"选项绑定的value是空字符串”"
6. CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText[‘110000’]输出北京市
7. TextToCode是个大对象，属性是汉字，属性值是区域码 用法例如：TextToCode[‘北京市’].code输出110000,TextToCode[‘北京市’][‘市辖区’].code输出110100,TextToCode[‘北京市’][‘市辖区’][‘朝阳区’].code输出110105

二、省市区三级联动（不带“全部”选项）–范例

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

打印结果
打印出选择的地址的code值

三、实现三级联动并数据回显

1、在return中定义数据

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

2、在el-form-item标签中进行数据绑定

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

3、在methods方法中进行数据赋值

// 省市区三级联动
    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、数据回显
在修改方法中进行数据的回显

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、在methods中的表单重置方法中添加selectedOptions信息的重置

this.selectedOptions = [];