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

news2025/1/15 17:41:59

项目场景:

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


原因分析:

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

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()函数可以让你的应用更加健壮,稳定性更好。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

webpack系列之:手把手教你 打包和使用js文件

项目初始化 mkdir demo1 cd demo1 npm init // 一路回车 创建一个package.json文件webpack安装 npm install --save-dev webpackJs文件打包 可以先看一下最后的项目情况,然后我们再开始一步步操作 创建需要打包的js文件 创建文件夹用于存放js文件 // 创建文…

抖音测试付费短视频:从短剧领域拓展到知识、娱乐全品类

11月16日,抖音开始测试短视频内容付费,即用户在观看创作者的内容时,部分内容需要付费解锁才能全部观看,涉及范围不仅包括此前已经进行付费试水的短剧领域,还拓展至知识、娱乐等几乎全品类内容,用户可按单条…

asp.net core EF Sqlserver

一、EF CORE的使用 1、使用NuGet来安装EF CORE 使用程序包管理器控制台,进行命令安装 //安装 Microsoft.EntityFrameworkCoreInstall-Package Microsoft.EntityFrameworkCore //安装 Microsoft.EntityFrameworkCore.SqlServer Install-Package Microsoft.EntityF…

【数据结构】C语言实现栈

🎈个人主页:库库的里昂 🎐C/C领域新星创作者 🎉欢迎 👍点赞✍评论⭐收藏✨收录专栏:数据结构与算法🤝希望作者的文章能对你有所帮助,有不足的地方请在评论区留言指正,大家…

浅谈青岛啤酒厂事件—论智能视频监控的重要性和必要性

近日,“青岛啤酒三厂有工人在原料仓小便”的视频曝光,引发舆论关注。虽然此次事件原委已经明了,但此次事件也给我们敲了一个警钟。啤酒厂生产的是入口的食品原料,就因一个工作口角就导致有人罔顾大众食品安全,作出严重…

Windows Server 2012 R2系统服务器远程桌面服务多用户登录配置分享

Windows Server 2012系统在没有安装远程多界面的情况下,最多只能同时运行2个远程桌面,如果是有多个技术员、合伙人同时操作或是像游戏开发需要用到多界面,但是没有安装就很不方便,今天飞飞来和你们分享Windows server 2012R2系统远…

rtsp、rtmp、m3u8、flv、mkv、3gp、mp4直播流测试地址

✍️作者简介:沫小北/码农小北(专注于Android、Web、TCP/IP等技术方向) 🐳博客主页:沫小北/码农小北 开源中国、稀土掘金、51cto博客、博客园、知乎、简书、慕课网、CSDN 🔔如果文章对您有一定的帮助请&…

pwnable.kr--pwn游戏之fd

题目描述: 大致告诉我们研究的可能是Linux下的文件描述符。需要我们用ssh链接过去找到flag。于是我们就过去看看: 乍看情况有点像简单nc,我们尝试看看目录下都有什么: 看到flag,那么尝试输出呢? Permission…

AI换脸的一种技术实施例

刚刚看一个帖子的时候发现了AI识别中一个可以利用到其它场景的的一个通用处理步骤:人脸矫正。 人脸识别过程: 1.首先识别到关键的人脸部分,经过一个粗筛过程,把目标物的脸部图样先抓出来。 2.然后,因为人脸的水平&…

AI自动直播软件,ai无人直播工具2.0支持多平台矩阵直播一键同步直播脚本内容【直播脚本+使用技术教程】

AI实景直播软件简介: 支持一台手机自动直播,支持语音和文字同时回复,商品自动弹窗,支持抖音、快手、视频号、美团平台直播,支持矩阵直播,一键同步直播脚本内容。 设备需求: 安卓手机&#xf…

Hack_Kid

Hack_Kid 靶机地址:https://download.vulnhub.com/hackerkid/Hacker_Kid-v1.0.1.ova 一、主机发现 发现靶机IP为192.168.80.135 二、端口扫描 发现靶机开启了80、53、9999端口 三、信息收集 1.访问80端口 2.访问9999端口 根据靶场作者的提示,不…

深眸科技革新升级OCR技术,与AI视觉实现有效融合赋能各行业应用

OCR即光学字符识别,是通过扫描仪或工业相机等电子设备检查打印的字符,并通过检测暗、亮的模式确定其形状,然后用字符识别方法将形状翻译成计算机文字的过程。 目前,随着机器视觉和人工智能技术的进一步升级,OCR技术实…

大数据毕业设计选题推荐-机房信息大数据平台-Hadoop-Spark-Hive

✨作者主页:IT研究室✨ 个人简介:曾从事计算机专业培训教学,擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Python…

北邮22级信通院数电:Verilog-FPGA(9)第九周实验(4)实现寄存器74LS374

北邮22信通一枚~ 跟随课程进度更新北邮信通院数字系统设计的笔记、代码和文章 持续关注作者 迎接数电实验学习~ 获取更多文章,请访问专栏: 北邮22级信通院数电实验_青山如墨雨如画的博客-CSDN博客 目录 一.代码部分 1.1 reg_74LS374.v 1.2 reg_LS3…

渗透测试——1

1.计算机地址 计算机在网络中的地址有以下3类: (1)物理地址 物理地址相当于现实生活中的人脸,是不可改变的,独一无二的。每张网卡的物理地址是固定不变的。 物理地址由六个十六进制数组成,如&…

chatGPT API中参数temperature的含义是什么

在 ChatGPT API 中,temperature 参数用于控制回答的确定性和创造性。temperature 的值范围通常是从 0 到 1。这个参数影响模型生成回答时的随机性: 低温度值(如 0 或接近 0):会导致模型生成更确定、更一致、更少出乎意…

C++面向对象编程(3)——常用关键字介绍(TODO)

本篇会逐步添加一些C的关键字,持续更新... 一. default 1.1 场景 如果对构造函数进行了重载,则编译器不会隐式的生成一个默认的构造函数,此时如果调用了默认构造函数会在编译时报错,但是很多时候我们是需要默认构造函数的。如何…

sqli-labs(2)

7. 输入?id1 --显示格式错误 ?id1" --正常 测试 ?id1“ and sleep(5) -- 发现并没有成功 ?id1) --显示格式错误继续尝试 ?id1)) -- 显示正常 测试 ?id1“ and sleep(5) -- 发现sleep执行 对于语句闭合的尝试主要从 " ()来测试 报错语句尝试发现不回显报错信息…

如何利用自动发现将现网的进程纳入到监控系统中?

进程监控是一项关键任务,旨在监测系统中运行的进程的性能和状态。通过有效的进程监控,可以实时了解进程的运行情况,及时发现问题并采取措施,确保系统的稳定性和性能。 本期EasyOps产品使用最佳实践,我们将为您揭晓&am…

数据结构与算法之美学习笔记:19 | 散列表(中):如何打造一个工业级水平的散列表?

目录 前言如何设计散列函数?装载因子过大了怎么办?如何避免低效的扩容?如何选择冲突解决方法?工业级散列表举例分析解答开篇内容小结 前言 本节课程思维导图: 今天,我们就来学习一下,如何设计一…