解决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 相关文章推荐
js实现的网站首页随机公告随机公告
Mar 14 Javascript
js 判断js函数、变量是否存在的简单示例代码
Mar 04 Javascript
Javascript中的方法和匿名方法实例详解
Jun 13 Javascript
微信小程序tabbar不显示解决办法
Jun 08 Javascript
基于JS对象创建常用方式及原理分析
Jun 28 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
微信小程序模拟cookie的实现
Jun 20 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 Javascript
Vue的编码技巧与规范使用详解
Aug 28 Javascript
详解element-ui动态限定的日期范围选择器代码片段
Jul 03 Javascript
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 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生成缩略图的类代码
2008/10/02 PHP
PHP之数组学习
2011/05/29 PHP
php生成局部唯一识别码LUID的代码
2012/10/06 PHP
PHP面试常用算法(推荐)
2016/07/22 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
CLASS_CONFUSION JS混淆 全源码
2007/12/12 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
2016/11/29 Javascript
jQuery源码分析之sizzle选择器详解
2017/02/13 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
微信小程序canvas绘制圆角base64图片的实现
2019/08/18 Javascript
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
python入门之语句(if语句、while语句、for语句)
2015/01/19 Python
Python的Flask框架中使用Flask-SQLAlchemy管理数据库的教程
2016/06/14 Python
Django 多环境配置详解
2019/05/14 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
Python使用循环神经网络解决文本分类问题的方法详解
2020/01/16 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
五种Python转义表示法
2020/11/27 Python
Html5页面二次分享的实现
2018/07/30 HTML / CSS
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
马德里竞技官方网上商店:Atletico Madrid Shop
2019/03/31 全球购物
十佳大学生村官事迹
2014/01/09 职场文书
端午节活动总结
2014/08/26 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
群众路线对照检查材料
2014/09/22 职场文书
实习生矿工检讨书
2014/10/13 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
2015年度房地产工作总结
2015/04/09 职场文书
工作后的感想
2015/08/07 职场文书
《窃读记》教学反思
2016/02/18 职场文书
2016年感恩母亲节活动总结
2016/04/01 职场文书
python 安全地删除列表元素的方法
2022/03/16 Python