当前位置: 首页 > news >正文

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

 项目场景:

<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.dtcms.com/a/125337.html

相关文章:

  • 【2】安装Nodejs-Nodejs开发入门
  • 直播电商革命:东南亚市场的“人货场”重构方程式
  • GNSS静态数据处理
  • 如何将网页保存为pdf
  • 【后端开发】Spring MVC-计算器、用户登录、留言板
  • TaskFlow开发日记 #1 - 原生JS实现智能Todo组件
  • C++ I/O 性能优化指南
  • my2sql工具恢复误删数据
  • 蓝桥杯知识总结
  • Python及Javascript的map 、 filter 、reduce类似函数的对比汇总
  • python 办公自动化------ excel文件的操作,读取、写入
  • 大模型上下文协议MCP详解(2)—核心功能
  • 2025最新版Nodejs安装及环境配置教程
  • 如何使用 Spring Boot 实现分页和排序?
  • qwen-vl 实现OCR的测试
  • 《AI大模型应知应会100篇》第10篇:大模型的涌现能力:为什么规模如此重要
  • Python数据分析-NumPy模块-查看数组属性
  • STM32 模块化开发实战指南:系列介绍
  • 贪心算法-跳跃游戏
  • Windows环境下 全屏显示某个字符串
  • css易混淆的知识点
  • 开发遇到的问题-编译报错
  • 分布式锁和事务注解结合使用
  • 第Y1周:调用YOLOv5官方权重进行检测
  • Python函数的说明文档的访问方式
  • 人工智能的经济盲点及AI拓展
  • 火山RTC 4 音视频引擎 IRTCVideo,及 音视频引擎事件回调接口 IRTCVideoEventHandler
  • 数据结构基础(2)
  • ubuntu 服务器版本常见问题
  • Node.js多版本共存管理工具NVM(最新版本)详细使用教程(附安装包教程)