vue+elementUi实现中国省市区三级联动

1.在终端输入

npm install element-china-area-data -S

2.导入数据

import {
  regionDataPlus,
  TextToCode,
  CodeToText,
} from "element-china-area-data";

3.html

<template>
  <div id="app">
          <span>省市区/县:</span>
          <el-cascader
            size="large"
            :options="options"
            v-model="selectedOptions"
            @change="handleChange"
          >
          </el-cascader>
        </div>
</template>

4.在data数据写入

 
export default {
    data () {
      return {
        accdress: "",
        options: regionDataPlus,
        selectedOptions: [],
        
      }
    },
 
    methods: {
      handleChange() {
      var location = "";
      for (let i = 0; i < this.selectedOptions.length; i++) {
        location += CodeToText[this.selectedOptions[i]];
      }
      console.log(location); //打印区域码所对应的属性值即中文地址
        },



      //也可以这样写

      handleChange(){
        let value=['110000', '110100', '110105']
        let address=[]
            address=CodeToText[value[0]] + '/' + CodeToText[value[1]] + '/' +                             CodeToText[value[2]]
        console.log(address)// 北京市/市辖区/朝阳区

    }     


    }
  }