【Vue】获取el-select修改前后的数据

一、场景

        使用下拉组件(el-select)开发时,遇到一种场景,修改下拉选项时需要弹窗让用户二次确认,确定后才能更新新值,取消页面则需要回复原数据。

二、解决方案

1. el-select 增加 ref属性,并修改@change方法

<el-select v-model="ruleForm.sourceType"ref="ruleFormSourceType"@change="(currentValue) => handleChangeSourceType(currentValue, $refs['ruleFormSourceType'].value)"placeholder="转出对象类型"><el-option v-for="(item, index) of dictInfo.list['AAAAAA']":key="index"v-if="item.dataCode != 20":label="item.dataName":value="item.dataCode"></el-option>
</el-select>

2. 增加对应的方法实现 handleChangeSourceType

            handleChangeSourceType(newVal, oldVal) {let _self = this;_self.$confirm("修改XXX将会清空XXX,是否继续?", {confirmButtonText: "继续",cancelButtonText: "取消",type: "warning",}).then(() => {_self.$set(_self.ruleForm, 'sourceId', '');_self.$set(_self.ruleForm, 'sourceName', '');_self.$set(_self.ruleForm, 'paymentTableData', []);}).catch(() => {_self.$set(_self.ruleForm, 'sourceType', oldVal);});},

其中 newVal为修改后的新值,oldVal为原有旧值,使用 comfirm中的catch来捕获取消事件,并重置为旧值

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

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

相关文章

学习echarts折线图tooltip属性的背景颜色方法

学习echarts折线图tooltip属性的背景颜色方法 在 ECharts 中&#xff0c;要设置折线图的 tooltip 背景颜色&#xff0c;你需要使用 tooltip 组件的 backgroundColor 属性。以下是一个简单的例子&#xff0c;展示了如何设置 tooltip 背景色&#xff1a; option {tooltip: {tri…

ros2笔记-3.2python 话题订阅与发布

3.1 话题通信介绍 话题发布订阅模型&#xff0c;有4个关键点&#xff1a;发布者、订阅者、话题名称、话题类型 bohubohu-TM1701:~$ ros2 node info /turtlesim There are 2 nodes in the graph with the exact name "/turtlesim". You are seeing information abou…

python常见绘图及代码

一、引言 在数据驱动的时代&#xff0c;将数据转化为直观的图形对于理解数据、发现模式和传达信息至关重要。Python作为一种功能强大且广受欢迎的编程语言&#xff0c;拥有丰富的绘图库&#xff0c;能满足不同场景下的数据可视化需求。本文将深入探讨Python中常见的绘图程序&am…

GWAS数据和软件下载

这部分主要是数据获取,以及软件配置方法。 一、配套数据和代码 数据和代码目前在不断的更新,最新的教程可以私信,我通过后手动发送最新版的pdf和数据代码。发送的压缩包,有电子版的pdf和数据下载链接,里面是最新的百度网盘的地址,下载到本地即可。然后根据pdf教程,结合配套的…

【pytorch-lightning】架构一览

pytorch-lightning是基于pytorch的一个套壳项目&#xff0c;适配pytorch的版本同步更新速度很快。 它将训练的几个主要流程模块化&#xff0c;减少重复工作&#xff0c;同时让支持分布式训练&#xff0c;不同平台的训练迁移变得更加简单。 官网链接

Uniapp Android 本地离线打包(详细流程)

一、简介 App 离线 SDK 暂时不支持 Kotlin&#xff0c;未来不清楚。 uniapp 提供了 云打包 与 本地打包 两种方案&#xff0c;云打包 需要排队且还有次数限制&#xff0c;本地打包 则就没有这些限制&#xff0c;而且会 本地打包 对开发 原生插件 有很大的帮助。 细节&#x…

NeurIPS 2024 | 像素级LLM实现图像视频理解、生成、分割和编辑大统一(昆仑万维等)

Accepted by NeurIPS 2024 文章链接&#xff1a;https://arxiv.org/pdf/2412.19806 项目链接&#xff1a;https://vitron-llm.github.io/ Github链接&#xff1a;https://github.com/SkyworkAI/Vitron 亮点直击 首次提出了一种通用的视觉多模态大语言模型&#xff08;MLLM&…

AMP 混合精度训练中的动态缩放机制: grad_scaler.py函数解析( torch._amp_update_scale_)

AMP 混合精度训练中的动态缩放机制 在深度学习中&#xff0c;混合精度训练&#xff08;AMP, Automatic Mixed Precision&#xff09;是一种常用的技术&#xff0c;它利用半精度浮点&#xff08;FP16&#xff09;计算来加速训练&#xff0c;同时使用单精度浮点&#xff08;FP32…

细说STM32F407单片机FSMC连接外部SRAM的方法及HAL驱动

目录 一、FSMC连接外部SRAM的原理 1、 FSMC控制区域的划分 2、SRAM芯片与MCU的连接 二、访问外部SRAM的HAL驱动程序 1、外部SRAM初始化与控制 2、外部SRAM读写函数 3、直接通过指针访问外部SRAM 4、DMA方式读写外部SRAM 本文介绍STM32F407单片机FSMC连接外部SRAM及以轮…

react axios 优化示例

使用 axios 是 React 项目中非常常见的 HTTP 请求库。为了提升 axios 在 React 中的性能、可维护性和用户体验,我们可以从 代码组织、请求优化 和 用户体验优化 多个角度进行详细的优化。 一、安装与基础配置 安装 axios npm install axios创建 Axios 实例 为了更好地管理…

Java mysql根据很长的富文本如何自动获取简介

在Java应用程序中&#xff0c;根据很长的富文本自动生成简介是一个常见的需求。富文本通常包含HTML标签、格式化信息等&#xff0c;因此处理富文本以提取简介需要对文本进行解析和处理。以下是实现这一功能的详细步骤&#xff0c;包括如何从富文本中提取纯文本&#xff0c;并生…

Gitee图形界面上传(详细步骤)

目录 1.软件安装 2.安装顺序 3.创建仓库 4.克隆远程仓库到本地电脑 提交代码的三板斧 1.软件安装 Git - Downloads (git-scm.com) Download – TortoiseGit – Windows Shell Interface to Git 2.安装顺序 1. 首先安装git-2.33.1-64-bit.exe&#xff0c;顺序不能搞错2. …

基于单片机洗衣机控制器的设计(论文+源码)

1需求分析 在智能洗衣机系统设计中&#xff0c;考虑到洗衣机在实际应用过程中&#xff0c;需要满足用户对于不同衣物清洁、消毒的应用要求&#xff0c;对设计功能进行分析&#xff0c;具体如下&#xff1a; 通过按键实现洗衣机不同工作模式的切换&#xff0c;包括标准模式&…

【学Rust开发CAD】2 创建第一个工作空间、项目及库

文章目录 一、 创建工作空间二、新建项目&#xff08;可执行文件&#xff09;三、 新建库&#xff08;库文件&#xff09;四、更新项目依赖五、编写代码七、总结 在 Rust 中&#xff0c;工作空间&#xff08;workspace&#xff09;允许你管理多个相关的包&#xff08;crate&…

STM32的LED点亮教程:使用HAL库与Proteus仿真

学习目标&#xff1a;掌握使用STM32 HAL库点亮LED灯&#xff0c;并通过Proteus进行仿真验证&#xff01; 建立HAL库标准工程 1.新建工程文件夹 新建工程文件夹建议路径尽量为中文。建立文件夹的目的为了更好分类去管理项目工程中需要的各类工程文件。 首先需要在某个位置建立工…

Unity Excel转Json编辑器工具

功能说明&#xff1a;根据 .xlsx 文件生成对应的 JSON 文件&#xff0c;并自动创建脚本 注意事项 Excel 读取依赖 本功能依赖 EPPlus 库&#xff0c;只能读取 .xlsx 文件。请确保将该脚本放置在 Assets 目录下的 Editor 文件夹中。同时&#xff0c;在 Editor 下再创建一个 Exc…

牛客网刷题 ——C语言初阶(6指针)——字符逆序

1. 题目描述&#xff1a;字符逆序 牛客网题目链接 将一个字符串str的内容颠倒过来&#xff0c;并输出。 输入描述: 输入一个字符串&#xff0c;可以有空格 输出描述: 输出逆序的字符串 示例1 输入 I am a student 输出 tneduts a ma I 2. 思路 首先字符串逆序&#xff0c;之…

【数据可视化】数据可视化看板需求梳理模板(含示例)

一、模板 设计一个数据可视化看板需要从多个方面梳理需求&#xff0c;以确保看板能够有效地传达信息并满足用户的需求。以下是一些关键方面&#xff1a; 1.目标和受众 ● 明确目标&#xff1a;确定看板的主要目的&#xff0c;例如监控业务指标、分析市场趋势、展示项目进度等…

【USRP】教程:在Macos M1(Apple芯片)上安装UHD驱动(最正确的安装方法)

Apple芯片 前言安装Homebrew安装uhd安装gnuradio使用b200mini安装好的路径下载固件后续启动频谱仪功能启动 gnu radio关于博主 前言 请参考本文进行安装&#xff0c;好多人买了Apple芯片的电脑&#xff0c;这种情况下&#xff0c;可以使用UHD吗&#xff1f;答案是肯定的&#…

141.《mac m系列芯片安装mongodb详细教程》

文章目录 下载从官网下载安装包 下载后双击解压出文件夹安装文件名修改为 mongodb配置data存放位置和日志log的存放位置启动方式一方式二方式二:输入mongo报错以及解决办法 本人电脑 m2 pro,属于 arm 架构 下载 官网地址: mongodb官网 怎么查看自己电脑应该下载哪个版本,输入…