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

1. 安装

npm install element-china-area-data -S

2. script引用用

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

regionData是省市区三级联动数据（不带“全部”选项）
CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText[‘110000’]输出北京市
extToCode是个大对象，属性是汉字，属性值是区域码用法例如：TextToCode[‘北京市’].code输出110000,TextToCode[‘北京市’][‘市辖区’].code输出110100,TextToCode[‘北京市’][‘市辖区’][‘朝阳区’].code输出110105

3.使用

<el-form-item
          label="设备地区"
          prop="cascader"
        >
          <el-cascader
            ref="cascaderAddr"
            v-model="selectedOptions"
            size="large"
            :options="options"
            placeholder="请选择地区"
            @change="handleChange"
          />
        </el-form-item>

你会发现报错

使用CodeToText报错 原因博主找了好久，最后才找到，
下载的时候默认下载最新版本的， 稳定版本5.0.2版本才可以

npm install element-china-area-data@5.0.2  -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];
  },
}

最后效果：