解决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 相关文章推荐
javascript中文本框中输入法切换的问题
Dec 10 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
Mar 05 Javascript
解析AngularJS中get请求URL出现的跨域问题
Dec 01 Javascript
Vue.js学习教程之列表渲染详解
May 17 Javascript
解析Vue2 dist 目录下各个文件的区别
Nov 22 Javascript
JS原型继承四步曲及原型继承图一览
Nov 28 Javascript
vue中实现左右联动的效果
Jun 22 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 Javascript
js/jQuery实现全选效果
Jun 17 jQuery
Vue.js组件props数据验证实现详解
Oct 19 Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 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数组实例总结与说明
2011/08/23 PHP
PHP无法访问远程mysql的问题分析及解决
2013/05/16 PHP
Yii控制器中filter过滤器用法分析
2016/07/15 PHP
Laravel4中的Validator验证扩展用法详解
2016/07/26 PHP
js 加密压缩出现bug解决方案
2014/11/25 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
jquery获取url参数及url加参数的方法
2015/10/26 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
javascript正则表达式总结
2016/02/29 Javascript
JavaScript_object基础入门(必看篇)
2016/06/13 Javascript
Google Maps基础及实例解析
2016/08/06 Javascript
JS正则表达式验证密码格式的集中情况总结
2017/02/23 Javascript
基于Node.js的WebSocket通信实现
2017/03/11 Javascript
jQuery插件开发发送短信倒计时功能代码
2017/05/09 jQuery
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
详解处理Vue单页面应用SEO的另一种思路
2018/11/09 Javascript
Element Dropdown下拉菜单的使用方法
2020/07/26 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
[08:07]DOTA2每周TOP10 精彩击杀集锦vol.8
2014/06/25 DOTA
python中的单引号双引号区别知识点总结
2019/06/23 Python
python实现一个函数版的名片管理系统过程解析
2019/08/27 Python
Python3.7黑帽编程之病毒篇(基础篇)
2020/02/04 Python
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
css3进阶之less实现星空动画的示例代码
2019/09/10 HTML / CSS
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
Linux面试题LINUX系统类
2015/11/25 面试题
《夕阳真美》教学反思
2014/04/27 职场文书
财务管理专业自荐书
2014/09/02 职场文书
小学优秀教师先进事迹材料
2014/12/16 职场文书
工程部部长岗位职责
2015/02/12 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
红领巾广播站广播稿
2015/08/19 职场文书
写作之关于描写老人的好段摘抄
2019/11/14 职场文书