解决element-ui的下拉框有值却无法选中的情况


Posted in Javascript onNovember 07, 2020

问题描述:

在使用Vue框架和element-ui开发时,下拉框遇见一个问题,在函数中改变了页面中的某个值,在函数中查看是修改成功了,但在页面中没有及时刷新改变后的值,也就是下拉框值无法选中。(踩坑踩得莫名其妙)

代码段:

<el-select v-model="value" placeholder="请选择" @change="change()">
   <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>

解决方法:

出现这个问题好像是因为下拉框数据是循环掉别的接口得来的,因为数据层次太多,render函数没有自动更新,需手动强制刷新所以我直接强制刷新了值,而forceUpdate就是重新render。

写一个方法,在select的change事件中调用此方法,运用 this.$forceUpdate()强制刷新,页面正常选值。

change(){
   this.$forceUpdate()
 },

小结:

同理,forceUpdate()这个方法也适用一些很深的组件 state 已经改变了的时候,可以在该组件上面调用,解决页面v-for中修改item属性值后页面页面值不改变的问题。

补充知识:解决element ui select多选下拉框,在编辑表单记录时没有回显数据,默认选中的问题

前端使用vue,项目中使用的是element ui组件,在使用select下拉框多选时,新增记录时select多选下拉框正常使用,没问题。但是在编辑记录时,编辑界面也为select下拉框赋值了,却没有显示数据。

先放一个select多选下拉框编辑时正确的加载数据的显示效果图:

解决element-ui的下拉框有值却无法选中的情况

下拉框代码如下:

<el-form-item prop="czfaIds" label="处置方案">
 <el-select v-model="form.czfaIds" multiple style="width:80%;" placeholder="请选择" clearable :disabled="showControl">
   <el-option
       v-for="item in czfas" 
       :key="item.value"
       :label="item.wsdFamc" 
       :value="item.id" 
    />
  </el-select>
</el-form-item>

下拉框中的数据源czfas是一个数组,选中后的值也是一个数组。但是在后端存储的时候是转换成字符串存到数据库中的,所以在编辑界面从后端获取的返回值是一个字符串,首选要把这个字符串转换成数组,绑定到select 的v-model属性上。

代码如下:

// 编辑
  queryEditRow(index, row) {
   this.titleInfo = '编辑'
   this.dialogVisible = true
   this.form = Object.assign({}, row)

   // 将字符串转换成数组,绑定到select控件的v-model属性上
   this.form.czfaIds = row.czfaIds.split(',')

   this.showbtn = true
   this.showControl = false
  },

但是发现还是有问题,显示的是选中的方案的id值,而且没有将选择的选项选中。

如下图:

解决element-ui的下拉框有值却无法选中的情况

分析:select选择器对数据的显示,是匹配到select下拉框数据源中对应的value值时则会显示相应的label;若是没有匹配到,则显示的是该value。

显然,这里是因为没有匹配到下拉框中的value值,直接显示的这个字段的值。

在浏览器控制台中输出数据源的数据:

解决element-ui的下拉框有值却无法选中的情况

在浏览器控制台输出返回的字符串转换成数组后的值:

解决element-ui的下拉框有值却无法选中的情况

发现select下拉框中的id 和 v-mode里边绑定的id的数据类型不一致,虽然数据的值是一样的,但是一个是字符串,一个是整型数值。将后端返回的字符串在转换成数组时,转换成整形数组,下拉框即可正确显示。

代码如下:

// 编辑
  queryEditRow(index, row) {
   this.titleInfo = '编辑'
   this.dialogVisible = true
   this.form = Object.assign({}, row)

   // 将字符串转换成数组,此时是字符串数组
   var arrStringCzfaIds = row.czfaIds.split(',')
   // 将字符串数组的每一项转换成Number,生成一个新的数组
   var arrIntCzfaIds = []
   for (var arrInt in arrStringCzfaIds) {
    arrIntCzfaIds.push(parseInt(arrStringCzfaIds[arrInt]))
   }
   // 将新的Number数组,绑定到select空间的v-model上
   this.form.czfaIds = arrIntCzfaIds

   this.showbtn = true
   this.showControl = false
  },

此时,显示的效果就是本文开头的效果了。

以上这篇解决element-ui的下拉框有值却无法选中的情况就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
浏览器兼容console对象的简要解决方案分享
Oct 24 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
jquery Validation表单验证使用详解
Sep 12 Javascript
在JS方法中返回多个值的方法汇总
May 20 Javascript
jQuery Validate表单验证深入学习
Dec 18 Javascript
JavaScript自学笔记(必看篇)
Jun 23 Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 Javascript
Bootstrap基本模板的使用和理解1
Dec 14 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
Jun 29 Javascript
vue-cli配置环境变量的方法
Jul 09 Javascript
vue 之 css module的使用方法
Dec 04 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
Nov 07 #Javascript
详解datagrid使用方法(重要)
Nov 06 #Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
Nov 06 #Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 #Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
Nov 06 #Javascript
nuxt 路由、过渡特效、中间件的实现代码
Nov 06 #Javascript
Nuxt的路由动画效果案例
Nov 06 #Javascript
You might like
php长字符串定义方法
2012/07/12 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
Yii框架响应组件用法实例分析
2019/09/04 PHP
宝塔面板在NGINX环境中TP5.1如何运行?
2021/03/09 PHP
JavaScript 字符串乘法
2009/08/20 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
2012/06/14 Javascript
javascript面向对象入门基础详细介绍
2012/09/05 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
JavaScript中使用Math.floor()方法对数字取整
2015/06/15 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
JavaScript必知必会(二) null 和undefined
2016/06/08 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
js canvas实现放大镜查看图片功能
2017/06/08 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
微信小程序 POST请求的实例详解
2017/09/29 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
JavaScript数组特性与实践应用深入详解
2018/12/30 Javascript
Python获取linux主机ip的简单实现方法
2016/04/18 Python
Python对列表去重的多种方法(四种方法)
2017/12/05 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
Django 使用logging打印日志的实例
2018/04/28 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
使用Python快速制作可视化报表的方法
2019/02/03 Python
Django组件content-type使用方法详解
2019/07/19 Python
通过实例解析Python return运行原理
2020/03/04 Python
浅谈Tensorflow加载Vgg预训练模型的几个注意事项
2020/05/26 Python
matplotlib教程——强大的python作图工具库
2020/10/15 Python
用HTML5制作烟火效果的教程
2015/05/12 HTML / CSS
Zatchels官网:英国剑桥包品牌
2021/01/12 全球购物
Oracle里面常用的数据字典有哪些
2014/02/14 面试题
财务会计专业推荐信
2013/11/30 职场文书
英文简历中的自荐信范文
2013/12/14 职场文书
承德避暑山庄导游词
2015/02/03 职场文书
2015年教务主任工作总结
2015/07/22 职场文书
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB
nginx lua 操作 mysql
2022/05/15 Servers