vue2 el-element中el-select选中值,数据已经改变但选择框中不显示值,需要其他输入框输入值才显示这个选择框才会显示刚才选中的值。

news2025/4/17 8:40:13

 项目场景:

<el-table-column label="税率" prop="TaxRate" width="180" align="center" show-overflow-tooltip>
              <template slot-scope="{row, $index}">
                <el-form-item :prop="'InquiryItemList.' + $index + '.TaxRate'" label-width="0">
                  <el-select v-model="row.TaxRate" size="small" placeholder="请选择开票税率" @change="rateItemChange(row.TaxRate,$index,row)">
                    <el-option v-for="(item,index) in taxRateOptions" :key="index" :label="item.Label" :value="item.Value"></el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>

问题描述:


        el-select选中值,数据已经改变但选择框中不显示值,需要其他输入框输入值才显示这个选择框才会显示刚才选中的值

解决方案:


        给el-select标签添加一个change事件
 @change="rateItemChange(row.TaxRate,$index,row)"
 第一个值为选择的数值,暂时用不到,第二个值为数据的下标,用于事件改变值时提供坐标,第三个值为改变后的整条数据

 methods: {
    rateItemChange(val, index, item) {
      console.log("获取数据值,重新赋值", val, index,item);
      this.$set(this.offerBatchModifyData.InquiryItemList, index, item);
      console.log(this.offerBatchModifyData);
    },
}



this.offerBatchModifyData是我的详情数据,InquiryItemList是数组,
this.$set方法,第一个值为改变谁,第二个值为改变值的坐标,第三个则是改变后数据,重新赋值给详情数据
可以根据自己的数据做相应调整,这样就可以正常显示选中的数据了

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

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

相关文章

OFDM CP 对解码影响

OFDM符号间会存在ISI&#xff0c;为了解决该问题在符号间插入了循环前缀&#xff0c;可以说这个发明是OFDM能够实用的关键&#xff0c;在多径信道中CP可以有效的解决符号间干扰。3GPP中对于不同SCS 定义了不同的CP长度&#xff1a; 5G Cyclic Prefix (CP) Design -5G Physical …

Vue3.5 企业级管理系统实战(十四):动态主题切换

动态主题切换是针对用户体验的常见的功能之一&#xff0c;我们可以自己实现如暗黑模式、明亮模式的切换&#xff0c;也可以利用 Element Plus 默认支持的强大动态主题方案实现。这里我们探讨的是后者通过 CSS 变量设置的方案。 1 组件准备 1.1 修改 Navbar 组件 在 src/layo…

解决Ubuntu20.04安装ROS2的问题(操作记录)

一、ROS 系统安装版本选择 每版的Ubuntu系统版本都有与之对应ROS版本&#xff0c;每一版ROS都有其对应版本的Ubuntu版本&#xff0c;切记不可随便装。ROS 和Ubuntu之间的版本对应关系如下&#xff1a;&#xff08; 可以从这个网站查看ROS2的各个发行版本的介绍信息。&#xff…

C# 设置Excel中文本的对齐方式、换行、和旋转

在 Excel 中&#xff0c;对齐、换行和旋转是用于设置单元格内容显示方式的功能。合理的设置这些文本选项可以帮助用户更好地组织和展示 Excel 表格中的数据&#xff0c;使表格更加清晰、易读&#xff0c;提高数据的可视化效果。本文将介绍如何在.NET 程序中通过C# 设置Excel单元…

RPA VS AI Agent

图片来源网络 RPA&#xff08;机器人流程自动化&#xff09;和AI Agent&#xff08;人工智能代理&#xff09;在自动化和智能化领域各自扮演着重要角色&#xff0c;但它们之间存在显著的区别。以下是对两者区别的详细分析&#xff1a; 一、定义与核心功能 RPA&#xff08;机…

uniapp大文件分包

1. 在pages.json中配置 "subPackages":[{"root":pagesUser,"pages":[{"path":mine/xxx,"style":xxx },{"path":mine/xxx,"style":xxx}]},{"root":pagesIndex,"pages":[{"p…

Spark-core编程

sortByKey 函数说明 join 函数说明 leftOuterJoin 函数说明 cogroup 函数说明 RDD行动算子&#xff1a; 行动算子就是会触发action的算子&#xff0c;触发action的含义就是真正的计算数据。 reduce 函数说明 collect 函数说明 foreach 函数说明 count 函数说明 first …

2025年的Android NDK 快速开发入门

十年前写过一篇介绍NDK开发的文章《Android实战技巧之二十三&#xff1a;Android Studio的NDK开发》&#xff0c;今天看来已经发生了很多变化&#xff0c;NDK开发变得更加容易了。下面就写一篇当下NDK开发快速入门。 **原生开发套件 (NDK) **是一套工具&#xff0c;使开发者能…

基于springboot的“嗨玩旅游网站”的设计与实现(源码+数据库+文档+PPT)

基于springboot的“嗨玩旅游网站”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;springboot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 系统功能结构图 局部E-R图 系统首页界面 系统注册…

React 之 Redux 第三十一节 useDispatch() 和 useSelector()使用以及详细案例

使用 Redux 实现购物车案例 由于 redux 5.0 已经将 createStore 废弃&#xff0c;我们需要先将 reduxjs/toolkit 安装一下&#xff1b; yarn add reduxjs/toolkit// 或者 npm install reduxjs/toolkit使用 vite 创建 React 项目时候 配置路径别名 &#xff1a; // 第一种写法…

Llama 4全面评测:官方数据亮眼,社区测试显不足之处

引言 2025年4月&#xff0c;Meta正式发布了全新的Llama 4系列模型&#xff0c;这标志着Llama生态系统进入了一个全新的时代。Llama 4不仅是Meta首个原生多模态模型&#xff0c;还采用了混合专家(MoE)架构&#xff0c;并提供了前所未有的上下文长度支持。本文将详细介绍Llama 4…

【C++】函数直接返回bool值和返回bool变量差异

函数直接返回bool值和返回bool变量差异 背景 在工作中遇到一个比较诡异的问题&#xff0c;场景是给业务方提供的SDK有一个获取状态的函数GetStatus&#xff0c;函数的返回值类型是bool&#xff0c;在测试过程中发现&#xff0c;SDK返回的是false&#xff0c;但是业务方拿到的…

第1节:计算机视觉发展简史

计算机视觉与图像分类概述&#xff1a;计算机视觉发展简史 计算机视觉&#xff08;Computer Vision&#xff09;作为人工智能领域的重要分支&#xff0c;是一门研究如何使机器"看"的科学&#xff0c;更具体地说&#xff0c;是指用摄影机和计算机代替人眼对目标进行识…

英伟达Llama-3.1-Nemotron-Ultra-253B-v1语言模型论文快读:FFN Fusion

FFN Fusion: Rethinking Sequential Computation in Large Language Models 代表模型&#xff1a;Llama-3.1-Nemotron-Ultra-253B-v1 1. 摘要 本文介绍了一种名为 FFN Fusion 的架构优化技术&#xff0c;旨在通过识别和利用自然并行化机会来减少大型语言模型&#xff08;LLM…

云曦月末断网考核复现

Web 先看一个BUUCTF中的文件一个上传题 [BUUCTF] 2020新生赛 Upload 打开后是一个文件上传页面 随便上传一个txt一句话木马后出现js弹窗&#xff0c;提示只能上传图片格式文件 说明有前端验证。我的做法是把一句话改为.jpg格式&#xff0c; 然后上传 访问发现虽然上传成功了…

Flutter常用组件实践

Flutter常用组件实践 1、MaterialApp 和 Center(组件居中)2、Scaffold3、Container(容器)4、BoxDecoration(装饰器)5、Column(纵向布局)及Icon(图标)6、Column/Row(横向/横向布局)+CloseButton/BackButton/IconButton(简单按钮)7、Expanded和Flexible8、Stack和Po…

0.机器学习基础

0.人工智能概述&#xff1a; &#xff08;1&#xff09;必备三要素&#xff1a; 数据算法计算力 CPU、GPU、TPUGPU和CPU对比&#xff1a; GPU主要适合计算密集型任务&#xff1b;CPU主要适合I/O密集型任务&#xff1b; 【笔试问题】什么类型程序适合在GPU上运行&#xff1…

系统与网络安全------网络通信原理(4)

资料整理于网络资料、书本资料、AI&#xff0c;仅供个人学习参考。 网络层解析 IP 网络层概述 位于OSI模型第三层作用 定义网络设备的逻辑地址&#xff0c;俗称网络层地址&#xff08;如IP地址&#xff09; 在不同的网段之间选择最佳数据转发路径 协议 IP协议 IP数据包…

Java基础 4.12

1.方法的重载&#xff08;OverLoad&#xff09; 基本介绍 Java中允许同一个类&#xff0c;多个同名方法的存在&#xff0c;但要求形参列表不一致&#xff01; 如 System.out.println(); out是PrintStream类型 重载的好处 减轻了起名的麻烦减轻了记名的麻烦 2.重载的快速入…

XILINX DDR3专题---(1)IP核时钟框架介绍

1.什么是Reference Clock&#xff0c;这个时钟一定是200MHz吗&#xff1f; 2.为什么APP_DATA是128bit&#xff0c;怎么算出来的&#xff1f; 3.APP &#xff1a;MEM的比值一定是1:4吗&#xff1f; 4.NO BUFFER是什么意思&#xff1f; 5.什么情况下Reference Clock的时钟源可…