elementui Cascader 省市区联动选择器，应用与回显

目的：往数据库添加数据，形式为：xx省/xx市/xx县，并在前端回显
eg：

在element form表单里添加

<el-form-item label="地区" prop="user_address" label-width="130px"><el-cascaderclass="widthSmall"size="large":options="options"v-model="selectedOptions"@change="addressChange"></el-cascader></el-form-item>

在data里添加

data(){return{options: regionData, //省市区数据
selectedOptions:[], // 选中的地区
}
}

在create里添加

created() {this.selectedOptions = [this.form.provinceCode,this.form.cityCode,this.form.areaCode];},

在methods里添加

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];},}

import

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

如果没安装需要安装element-china-area-data

npm install element-china-area-data -S

完成第五步我们的级联选择器就可以使用了，现在我们来处理存数据和回显问题

为我们的数据库字段赋值，拼接成xx省/xx市/xx县，在addressChange方法里添加

CodeToText用法：CodeToText[‘110000’]输出北京市
设置完这里，我们直接上传表单就可以存选择的数据了

回显
在我们打开页面初始化获得数据的方法里分解数据

       //分解地区信息var index=this.userData.user_address.indexOf("\/")  // "/"第一次出现的位置var last=this.userData.user_address.lastIndexOf("\/")  //  "/"最后次出现的位置//TextToCode转换成地区编码var provinceCode=TextToCode[this.userData.user_address.slice(0,index)].codevar cityCode=TextToCode[this.userData.user_address.slice(0,index)][this.userData.user_address.slice(index+1,last)].codevar areaCode=TextToCode[this.userData.user_address.slice(0,index)][this.userData.user_address.slice(index+1,last)][this.userData.user_address.slice(last+1)].codethis.selectedOptions=[provinceCode,cityCode,areaCode]

slice用法：
let str=“我爱中国”
str.slice(1) //爱中国
str.slice(0,3) //我爱中

TextToCode用法：
TextToCode[‘北京市’].code 输出110000
TextToCode[‘北京市’][‘市辖区’].code 输出110100
TextToCode[‘北京市’][‘市辖区’][‘朝阳区’].code 输出110105

eg:

回显成功。

加：
得到树的最后一个项目的id

handleChange(val) {const len = val.length;this.form.id = val[len-1]},

elementui Cascader 省市区联动选择器，应用与回显相关推荐

【问题总结（12）】Cascader 省市区联动 obj[] Object.key() some.() String() forEach() 数组筛选过滤filter
1.obj[] 对象没有obj[0],这是数组的表达法arr[]. 数组有内置索引,对象没有,obj[] 里是key(键名) 下面展示一些 // An highlighted block const ...
Element的Cascader 级联选择器禁用和回显问题
今日,在vue项目中使用饿了么的Cascader级联选择器时,遇到了一个问题,情景时这样的, 数据是从后台拿到的,前端要做出的效果是当满足某些条件时,某些选项禁止选中.花了很长时间解决这个问题,于是写 ...
java 多级级联菜单回显_详解element-ui级联菜单（城市三级联动菜单）和回显问题...
代码最下面各项的参数截图代码如下 v-model="ruleForm.censusLand" style="width:180px;padding-left:7px; ...
python三级联动菜单_详解element-ui级联菜单（城市三级联动菜单）和回显问题
代码最下面各项的参数截图代码如下 v-model="ruleForm.censusLand" style="width:180px;padding-left:7px; ...
动态加载回显_ElementUI cascader级联动态加载及回显
先看图,你是否也遇到这个需求? 如果你正在焦头烂额,无脑抓瞎,那么你来对地方了,因为我将给你一个简单易懂的实现方案. 我也在网上翻了无数页答案,也照着别人的代码和思路尝试了,事实上并不能解决我这个棘手 ...
关于element的select多选选择器，数据回显的问题
关于element的select多选,数据回显的问题在工作中遇到这样一个问题,新建表单时用element的select多选以后,在编辑的时候打开表单发现其他数据能正常显示,多选却无法正常回显.在网上 ...
element显示服务器的图片,Vue+ElementUI+SpringMVC实现图片上传和回显
Vue+ElementUI+SpringMVC实现图片上传和table回显而我们也常遇到表单中包含图片上传的需求,并且需要在table中显示图片,所以这里我就讲一下结合后端的SpringMVC框架如 ...
Vue+ElementUI+SpringMVC实现图片上传和回显
Vue+ElementUI+SpringMVC实现图片上传和table回显在之前我们已经讲过了 Vue+ElementUI+SpringMVC实现分页 . 而我们也常遇到表单中包含图片上传的需求,并 ...
ElementUI中的el-select中多选回显数据后没法重新选择和更改
场景 ElementUI的el-select怎样实现下拉多选并实现给下拉框赋值和获取值: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detai ...

elementui Cascader 省市区联动选择器，应用与回显

elementui Cascader 省市区联动选择器，应用与回显相关推荐

最新文章

热门文章