elementui弹窗页按钮重复提交问题解决

一、BUG场景

ruoyi平台,页面弹出窗有提交按钮,在提交时连续多次点击会发生重复提交。

二、错误方案

给按钮增加  :loading="submitLoading" 属性。

<el-dialog :title="title" :v-if="open" :visible.sync="open" @close="cancel" ><el-button type="primary" :loading="submitLoading" @click="submitForm">提交</el-button>
</el-dialog>data() {return{open: false,submitLoading: false,}
},methods: {cancel() {this.open = false;this.submitLoading = false;},/** 提交按钮 */submitForm() {......this.submitLoading = true;this.api.add(formData).then(response => {.....this.cancel();});}
}

验证后发现并没有解决重复提交问题。

查询资料发现:el-dialog的关闭不是瞬间发生,是关闭动画,是动画,真是活久见了。侧面证明自己菜。

三、正确方案

给按钮增加  :loading="submitLoading||!open" 属性。

上面代码中只需要修改loading这一处就行了。

<el-dialog :title="title" :v-if="open" :visible.sync="open" @close="cancel" ><el-button type="primary" :loading="submitLoading||!open" @click="submitForm">提交</el-button>
</el-dialog>data() {return{open: false,submitLoading: false,}
},methods: {cancel() {this.open = false;this.submitLoading = false;},/** 提交按钮 */submitForm() {......this.submitLoading = true;this.api.add(formData).then(response => {.....this.cancel();});}
}

按钮逻辑

行为按钮submitLoading弹窗open按钮状态
打开弹窗前falsefalse禁用
打开弹窗后falsetrue可用
数据请求前truetrue禁用
请求结束&关闭弹窗falsefalse禁用

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

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

相关文章

学习Boost二:从附录3来看编码习惯

附录C 关键字浅谈 在C11标准中&#xff08;C11.2.12&#xff09;总共定义了73个关键字&#xff08;keyword&#xff09;、2个“准”关键字&#xff08;identifiers with special meaning&#xff09;和11个操作符替代字&#xff08;alternative representation&#xff09;[1]。…

【Python】数据分析+数据挖掘——掌握Python和Pandas中的单元格替换操作

1. 前言 数据处理和清洗是数据分析和机器学习中至关重要的步骤。在数据处理过程中&#xff0c;我们经常需要对数据集进行清洗和转换&#xff0c;其中单元格替换是一个常用的技术。Python作为一种功能强大且灵活的编程语言&#xff0c;为数据处理提供了丰富的工具和库。Pandas库…

邀请媒体现场报道,有哪些作用?

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 邀请媒体现场报道活动具有多种重要作用和意义&#xff0c;可以为你的活动带来广泛的曝光和正面影响。以下是一些邀请媒体现场报道的作用和意义&#xff1a; 1. 增加活动曝光度&#xff…

通过nvm工具快捷切换node.js版本、以及nvm的安装

使用nvm可以实现多个Node.js版本之间切换 步骤目录&#xff1a; 先卸载掉本系统中原有的node版本 去github上下载nvm安装包 安装node 常用的一些nvm命令 1、先卸载掉本系统中原有的node版本 2、去github上下载nvm安装包 https://github.com/coreybutler/nvm-windows/re…

ffmpeg转码时出现missing picture in access unit with size 14019

使用ffmpeg录制网络流视频&#xff0c;因为网卡的缘故导致录制中断&#xff0c;视频在转换的时候就出现这个问题。 missing picture in access unit with size 14019怀疑是在最后的地方视频是损坏的&#xff0c;索性截取掉最后的2秒时间&#xff0c;原本视频时长是02:06:28&am…

LeetCode933. 最近的请求次数

题干 写一个 RecentCounter 类来计算特定时间范围内最近的请求。 请你实现 RecentCounter 类&#xff1a; RecentCounter() 初始化计数器&#xff0c;请求数为 0 。int ping(int t) 在时间 t 添加一个新请求&#xff0c;其中 t 表示以毫秒为单位的某个时间&#xff0c;并返回…

Python学习笔记:List、Tuple、for循环

1.list list_demo [7, 7, 8, 9, 9, 9] print(list_demo.index(7)) # index 方法返回第一个index list_demo.sort() # 排序list list_demo.reverse() # 倒序list list_demo1 list_demo.copy() # 复制list 2.matrix 其实就是list嵌套&…

Linux命令200例:sort用于对文本文件进行排序的15个例子(常用)

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f3c6;本文已…

使用rspack 替换webpack加速vue3项目构建

rspack简介 rspack是字节跳动团队出的前端构建工具&#xff0c;使用rust编写。 在我看来&#xff0c;它是对webpack Api规范的rust实现与优化。 特点&#xff1a;速度快&#xff0c;易于从webpack迁移。 官网&#xff1a;Rspack rspack在0.2版本&#xff0c;兼容了vue-loa…

ChatGPT及其工作原理;OpenAI申请注册商标GPT-5,引发关注

&#x1f989; AI新闻 &#x1f680; OpenAI申请注册商标GPT-5&#xff0c;引发关注 摘要&#xff1a;OpenAI已在上月18日申请注册商标GPT-5&#xff0c;显示该模型将提供文本生成、自然语言理解、语音转录、翻译、分析等功能。此前OpenAI曾表示尚未开始训练GPT-4的后继者GPT…

transformer面试常考题

1.位置编码有哪些&#xff1f;有什么区别&#xff1f; nn.embedding和正余弦编码两种用的多。nn.embedding是一种基于学习的嵌入方法&#xff0c; 通过神经网络的训练过程&#xff0c; 会自动学习数据中每个符号的嵌入向量表示。 而正余弦编码是一种手工设计的嵌入方式&…

flask-session、数据库连接池

flask 自带session---》以cookie的形式放到了浏览器中---》加密 真正的session&#xff0c;是在服务端存储 -django中存在djangosession表中 -flask中&#xff0c;使用第三方&#xff0c;保存在---》redis中---》flask-session 使用步骤 pip install flask-session …

Django实现音乐网站 ⑸

使用Python Django框架制作一个音乐网站&#xff0c; 本篇主要是配置媒体资源设置。 目录 配置介绍 设置媒体资源 创建媒体资源目录 修改settings.py 注册媒体资源路由 总结 配置介绍 静态资源是指项目配置的js/css/image等系统常用文件。对于一些经常变动的资源&#x…

手机变电脑2023之虚拟电脑droidvm

手机这么大的内存&#xff0c;装个app来模拟linux&#xff0c;还是没问题的。 app 装好后&#xff0c;手指点几下确定按钮&#xff0c;等几分钟就能把linux桌面环境安装好。 不需要敲指令&#xff0c; 不需要对手机刷机&#xff0c; 不需要特殊权限&#xff0c; 不需要找驱…

【项目 计网1】4.1 网络结构模式 4.2MAC地址、IP地址、端口

文章目录 第四章 Linux网络编程4.1 网络结构模式C/S结构&#xff08;client-server&#xff09;B/S结构&#xff08;Browser/Server&#xff0c;浏览器/服务器模式&#xff09; 4.2 4.3MAC地址、IP地址、端口&#xff08;1&#xff09;&#xff08;2&#xff09;MAC地址IP地址(…

org.apache.hadoop.hive.ql.exec.DDLTask. show Locks LockManager not specified解决

Error while processing statement: FAILED: Execution Error, return code 1 from org.apache.hadoop.hive.ql.exec.DDLTask. show Locks LockManager not specified解决 当在Hive中执行show locks语句时&#xff0c;出现"LockManager not specified"错误通常是由于…

低代码平台的使用学习

背景 最近发现老婆每天都要捣鼓一个 excel 表格&#xff0c;并将表格发到群中&#xff0c;询问后才知道只是为了记录每天的事物变化。我想这接收方每次都要下载表格再打开看&#xff0c;太麻烦了&#xff0c;直接做个 web 表单&#xff0c;支持简单的增删改查就好了。 当我着…

第3集丨Vue 江湖 —— Vue中的事件

目录 一、Vue中事件使用二、事件修饰符2.1 prevent2.2 stop2.3 once2.4 capture2.5 self2.6 passive2.7 修饰符连续写2.8 整合案例 三、键盘事件3.1 Vue 中常用的按键别名3.2 key值绑定3.3 系统修饰符键3.4 keyCode绑定3.5 自定义别名3.6 组合键3.7 案例整合 一、Vue中事件使用…

面试题总结

文章目录 第一阶段:网络1、osi七层模型、tcp\ip 五层模型2、三次握手四次挥手3、交换机路由器工作原理4、vlan的作用5、icmp协议Linux1、cpu、内存、io、磁盘容量、网络流量、load average2、lvm逻辑卷如何创建3、raid磁盘阵列4、开机引导过程5、软连接硬链接6、查找文件命令7…