解决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 相关文章推荐
DOM 脚本编程中的兄弟节点
Oct 31 Javascript
简述JavaScript对传统文档对象模型的支持
Jun 16 Javascript
IE和Firefox之间在JavaScript语法上的差异
Apr 22 Javascript
纯JS实现轮播图
Feb 22 Javascript
微信小程序搜索组件wxSearch实例详解
Jun 08 Javascript
详解用vue编写弹出框组件
Jul 04 Javascript
使用Node.js搭建静态资源服务详细教程
Aug 02 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
Dec 25 Javascript
从vue源码看props的用法
Jan 09 Javascript
vue轻量级框架无法获取到vue对象解决方法
May 12 Javascript
js实现内置计时器
Dec 16 Javascript
vue3.0 上手体验
Sep 21 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维护文件系统
2006/10/09 PHP
php删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
php中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
详解在PHP的Yii框架中使用行为Behaviors的方法
2016/03/18 PHP
php 从指定数字中获取随机组合的简单方法(推荐)
2017/04/05 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
客户端js判断文件类型和文件大小即限制上传大小
2013/11/20 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
2015/08/05 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
关于Vue.js一些问题和思考学习笔记(2)
2016/12/02 Javascript
详谈AngularJs 控制器、数据绑定、作用域
2017/07/09 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
搭建vue开发环境
2018/07/19 Javascript
jQuery实现基本隐藏与显示效果的方法详解
2018/09/05 jQuery
Vue-Quill-Editor富文本编辑器的使用教程
2018/09/21 Javascript
小程序中canvas的drawImage方法参数使用详解
2019/07/04 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
JS实现密码框效果
2020/09/10 Javascript
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
python字符串加密解密的三种方法分享(base64 win32com)
2014/01/19 Python
python实现批量获取指定文件夹下的所有文件的厂商信息
2014/09/28 Python
在scrapy中使用phantomJS实现异步爬取的方法
2018/12/17 Python
Django框架搭建的简易图书信息网站案例
2019/05/25 Python
Python GUI编程学习笔记之tkinter控件的介绍及基本使用方法详解
2020/03/30 Python
python 制作简单的音乐播放器
2020/11/25 Python
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
普通党员对照检查材料
2014/09/24 职场文书
简易离婚协议书范本
2014/10/24 职场文书
结婚保证书
2015/01/16 职场文书
安全生产先进个人总结
2015/02/15 职场文书
简单聊聊Golang中defer预计算参数
2022/03/25 Golang