300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > vue 城市选择器(省市区)的使用 element-china-area-data报错

vue 城市选择器(省市区)的使用 element-china-area-data报错

时间:2020-03-26 05:05:11

相关推荐

vue 城市选择器(省市区)的使用 element-china-area-data报错

插件官网 :/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];},}

最后效果:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。