解决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 继承机制实例
Aug 12 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
Dec 07 Javascript
jquery选择器之基本过滤选择器详解
Jan 27 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
Jun 30 Javascript
vue上传图片组件编写代码
Jul 26 Javascript
javascript、php关键字搜索函数的使用方法
May 29 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 Javascript
vue中nextTick用法实例
Sep 11 Javascript
基于ajax实现上传图片代码示例解析
Dec 03 Javascript
vue自定义右键菜单之全局实现
Apr 09 Vue.js
解决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 Undefined index和Undefined variable的解决方法
2008/03/27 PHP
PHP过滤★等特殊符号的正则
2014/01/27 PHP
PHP伪静态Rewrite设置之APACHE篇
2014/07/30 PHP
php类的扩展和继承用法实例
2015/06/20 PHP
8个PHP数组面试题
2015/06/23 PHP
PHP使用内置函数生成图片的方法详解
2016/05/09 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
详解PHP中array_rand函数的使用方法
2016/09/11 PHP
PHP实现对数组分页处理实例详解
2017/02/07 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
Gird事件机制初级读本
2007/03/10 Javascript
Sample script that deletes a SQL Server database
2007/06/16 Javascript
prototype 学习笔记整理
2009/07/17 Javascript
js字符串转换成xml对象并使用技巧解读
2013/04/18 Javascript
JS 操作Array数组的方法及属性实例解析
2014/01/08 Javascript
JavaScript模拟push
2016/03/06 Javascript
vue.js全局API之nextTick全面解析
2017/07/07 Javascript
angular $watch 一个变量的变化(实例讲解)
2017/08/02 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
2018/01/21 Javascript
解决JavaScript layui 下拉框不显示的问题
2018/08/14 Javascript
微信小程序顶部导航栏滑动tab效果
2019/01/28 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
python实现Zabbix-API监控
2018/09/17 Python
Python循环中else,break和continue的用法实例详解
2019/07/11 Python
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
Hush Puppies澳大利亚官网:舒适的男女休闲和正装鞋
2019/08/24 全球购物
PHP数据运算类型都有哪些
2013/11/05 面试题
夏季奶茶店创业计划书
2014/01/16 职场文书
护理学专业求职信
2014/06/29 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
老干部局2015年度工作总结
2015/10/22 职场文书
Go语言操作数据库及其常规操作的示例代码
2021/04/21 Golang
win10搭建配置ftp服务器的方法
2022/08/05 Servers