element-ui 省市区插件

插件官网：https://www.npmjs.com/package/element-china-area-data

项目npm 下载组件 npm install element-china-area-data -S

一.在使用的页面中导入

 <el-form-item prop="areaCode" label="所在地区" :label-width="formLabelWidth">
          <el-cascader
            class="widthSmall"
            size="large"
            :options="options"
            v-model="selectedOptions"
            @change="addressChange">
          </el-cascader>
 </el-form-item>

import { regionData,CodeToText } from 'element-china-area-data'

  //data中定义参数
  data(){
      return{
       form:{},
       options: regionData, //省市区数据
       selectedOptions:[], // 选中的地区
      }
  },
   created() {
            // 初始化省市区
          this.selectedOptions = [this.form.provinceCode,this.form.cityCode,this.form.areaCode];
    },
methods: {

addressChange(arr) {
      var _this = this;
      console.log(arr);
      console.log(CodeToText[arr[0]], CodeToText[arr[1]], CodeToText[arr[2]]);
      _this.form.provinceCode = arr[0];
      _this.form.cityCode = arr[1];
      _this.form.areaCode = arr[2];
  },
}