插件官网 :/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-itemlabel="设备地区"prop="cascader"><el-cascaderref="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-cascaderclass="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];},}