elementUI之省市区三级联动

element – 省市区三级联动

• 官方文档地址：https://www.npmjs.com/package/element-china-area-data
  

1、安装组件依赖

npm install element-china-area-data -S
或者
cnpm  install element-china-area-data -S

2、目标页面中引入

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

3、使用el-cascader标签

<div style="width:460px;">
  <el-cascader style="width:100%;" :options="options" 
  v-model="selectedOptions" @change="addressChoose"></el-cascader>
</div> 

4、data中定义元素

data(){
    return{
      // 省市区级联
      options: regionDataPlus,
      selectedOptions: [],
    }
}

5、触发事件的函数方法

 /**省市区三级联动 */
addressChoose(value) {
  console.log("地址", value);
  console.log('省市区：',CodeToText[value[0]],CodeToText[value[1]],CodeToText[value[2]]);
}

按照步骤，直接C+V复制到项目中，就可以运行实现图中效果