el-select下拉框只回显value不回显label的原因以及解决方法

项目场景:

提示:这里简述项目相关背景:


原因分析:

提示:这里填写问题的分析:

el-select的采用的是map的key value结构,因此只显示value而不显示label的原因是,value的类型不正确,将value转换成对应的类型即可

 el-select 中的value对值的类型很敏感


解决方案:

提示:这里填写该问题的具体解决方案:

1:在获取到返显数据的时候,将value转换成对应的类型即可

2:如果转换了正确的类型还是返显value而不是label,那么有可能时因为下拉框的数据没有请求出来,因此没有返显相对应的label,

3:如果 value类型是正确的,下拉框数据也有,还是返显的value,最后可以试一下在el-select加一个change方法中使用this.$forceUpdate()方法如下

selectShenPiRenChange(val) {

      this.addPayOffForm.selectShenPiRen = this.selectList.find(

        (item) => item.id == val

      ).id;

      this.addPayOffForm.selectShenPiRenName = this.selectList.find(

        (item) => item.id == val

      ).userName;

      this.$nextTick(() => {

        this.$forceUpdate();

      });

    },

注:

this.$forceupdate()是Vue.js中的一个API,它可以强制组件更新,就是当组件的数据发生变化时,它可以立即更新组件的视图,而不需要等待下一次重新渲染。

this.$forceupdate()函数有以下特点:

1. 它可以强制组件更新,在数据发生变化时,可以立即更新组件的视图,而不需要等待下一次重新渲染;

2. 它可以避免组件重新渲染,提升性能;

3. 它可以避免在某些情况下出现不可预料的bug;

4. 它可以使组件在不同的环境中保持一致性;

使用this.$forceupdate()函数的方法很简单,只需在你的组件中调用它即可,例如:this.$forceupdate()

此外,this.$forceupdate()函数也可以接受一个参数,参数为boolean类型,传入true时,则可以强制执行子组件的更新,传入false时,则只更新当前组件本身。

综上所述,this.$forceupdate()是一个非常有用的API,它可以帮助开发者更新组件,提高性能,避免不可预料的bug,使组件在不同的环境中保持一致性,因此使用this.$forceupdate()函数可以让你的应用更加健壮,稳定性更好。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/152752.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Effect C++ 笔记】(四)设计与声明

【四】设计与声明 条款18 : 让接口容易被正确使用,不易被误用 Item 18: 让接口容易被正确使用,不易被误用 Make interfaces easy to use correctly and hard to use incorrectly. “让接口容易被正确使用,不易被误用”&#xff0…

Abaqus2023新功能:分析技术

隐式耦合的松弛和加速器方法 产品:Abaqus/Standard SIMULIA协同仿真引擎现在支持Aitkens松弛方法以及Anderson和Broyden加速器方法,为强耦合物理场提供稳健且省时高效的解决方案。此功能在 2022 FD04 (FP.2232)版本中首次提供。…

vue的常用指令

1.使用双花括号( {{}} )对变量输出,内部可以写简单的表达式用于对数据的处理 2..v-text:相当于js的innerText, 3.v-html:相当于js的innerHTML 4.v-bind:动态绑定属性,简写是冒号( : ) 5.绑定class:操作元素的 class 列表和内联样式…

Moka人事:实现无代码开发的API连接,打通电商平台与用户运营系统

无代码开发的API连接:Moka人事的核心优势 Moka人事,是北京希瑞亚斯科技有限公司于2015年推出的一款数据驱动的智能化HR SaaS产品。这款产品的主要优势在于其无需进行API开发即可实现系统的连接和集成,这不仅大大提升了企业的工作效率&#x…

2023数维杯国际赛数学建模D题思路模型分析

D题思路模型分析:详细思路获取见文末名片 问题D:洗衣清洗的数学问题 洗衣清洗是人们每天都在做的事情。洗衣粉的去污功能来自于一些表面活性剂的化学物质。它们可以提高水的渗透性,并利用分子间静电排斥机制去除污垢颗粒。由于表面活性剂分…

【汇编】Debug的使用

文章目录 前言一、Debug是什么?二、为什么Debug如此重要?三、Debug的使用3.1 Debug的运行3.1 R命令查看寄存器的状态改变寄存器的值 3.2 用D命令查看内存中的内容列出预设地址内存内容列出指定地方的内容列出指定地方的指定大小的内容 3.3 使用e命令修改…

learning to rank 学习排名系统综述

Learning to Rank 的实践 文档列表方法 Listwise 算法相对于 Pointwise 和 Pairwise 方法来说,它不再将排序问题转化为一个分类问题或者回归问题,而是直接针对评价指标对文档的排序结果进行优化,如常用的 MAP、NDCG 等。应用 Listwise 的模型…

js构造函数之工厂模式(学习笔记1)

目录 一、简单工厂 1、存储一个用户信息 2、存储N个用户信息 3、存储N个用户信息不同年龄用户有不同美食的搭配方案【简单工厂模式】 二、抽象工厂模式 1、抽象工厂(AbstractFactory) 2、具体工厂(ConcreteFactory) 3、生产新款手机 4、总结 本…

V10服务器安装virt-manage

kvm是什么 KVM(Kernel-based Virtual Machine, 即内核级虚拟机) 是一个开源的系统虚拟化模块。它使用Linux自身的调度器进行管理,所以相对于Xen,其核心源码很少。目前KVM已成为学术界的主流VMM之一,它包含一个为处理器提供底层虚拟化 可加载…

服务器数据恢复—服务器raid5离线磁盘上线同步失败的数据恢复案例

服务器数据恢复环境&故障: 某品牌DL380服务器中有一组由三块SAS硬盘组建的RAID5阵列。数据库存放在D分区,数据库备份存放在E分区。 服务器上有一块硬盘的状态灯显示红色,D分区无法识别,E分区可识别,但是拷贝文件报…

MyBatis 操作数据库(⼊⻔)

前言 通过本篇博客,我们将学到以下内容 1.使⽤MyBatis完成简单的增删改查操作,参数传递 2.掌握MyBatis的两种写法: 注解和 XML⽅式 3.掌握 MyBatis 相关的⽇志配置 什么是 MyBatis? MyBatis是⼀款优秀的 持久层 框架,⽤于简化JDBC(关于 JD…

推荐5款堪称神器的免费软件

​ 今天再次推荐5个良心好用的Windows神级软件,每一个都是完全免费,堪称神器,让你打开新世界的大门。 1.文件复制——SuperCopy ​ SuperCopy 是一款 Chrome 浏览器的扩展,可以帮助您解除网站上禁止复制、右键、全选、粘贴等限制…

Linux Docker图形化工具Portainer如何进行远程访问?

文章目录 前言1. 部署Portainer2. 本地访问Portainer3. Linux 安装cpolar4. 配置Portainer 公网访问地址5. 公网远程访问Portainer6. 固定Portainer公网地址 前言 Portainer 是一个轻量级的容器管理工具,可以通过 Web 界面对 Docker 容器进行管理和监控。它提供了可…

easyExcle单元格合并

自定义单元格合并策略: /*** 自定义单元格合并策略** create: 2023-11-15 13:41**/ Data NoArgsConstructor AllArgsConstructor Slf4j public class EasyExcelCustomMergeStrategy implements RowWriteHandler {/*** 总数*/private Integer totalNum;//合并行计数…

填充每个节点的下一个右侧节点指针

题目链接 填充每个节点的下一个右侧节点指针 题目描述 注意点 给定一个 完美二叉树 解答思路 广度优先遍历一层层的遍历二叉树,将每一层节点的next指针都指向右侧节点 代码 class Solution {public Node connect(Node root) {if (root null) {return null;}…

[nlp] 损失缩放(Loss Scaling)loss sacle

在深度学习中,由于浮点数的精度限制,当模型参数非常大时,会出现数值溢出的问题,这可能会导致模型训练不稳定。为了解决这个问题,损失缩放(Loss Scaling)技术被引入,它通过缩放损失值来解决这个问题。 在深度学习中,损失缩放技术通常是通过将梯度进行缩放来实现的。具…

【ES6标准入门】JavaScript中的模块Module语法的使用细节:export命令和imprt命令详细使用,超级详细!!!

😁 作者简介:一名大四的学生,致力学习前端开发技术 ⭐️个人主页:夜宵饽饽的主页 ❔ 系列专栏:JavaScript进阶指南 👐学习格言:成功不是终点,失败也并非末日,最重要的是继…

Google codelab WebGPU入门教程源码<5> - 使用Storage类型对象给着色器传数据(源码)

对应的教程文章: https://codelabs.developers.google.com/your-first-webgpu-app?hlzh-cn#5 对应的源码执行效果: 对应的教程源码: 此处源码和教程本身提供的部分代码可能存在一点差异。运行的时候,点击画面可以切换效果。 class Color4 {r: number;g: numb…

Java面向对象(高级)-- static关键字的使用

文章目录 一、static关键字(1)类属性、类方法的设计思想(2) static关键字的说明(3)static修饰属性1. 复习变量的分类2. 静态变量2.1 语法格式2.2 静态变量的特点2.3 举例2.3.1 举例12.3.2 举例22.3.3 举例3…

linux套接字-Socket

1.概念 局域网和广域网 局域网:局域网将一定区域内的各种计算机、外部设备和数据库连接起来形成计算机通信的私有网络。广域网:又称广域网、外网、公网。是连接不同地区局域网或城域网计算机通信的远程公共网络。IPInternet Protocol)&#…