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 | 按钮状态 |
打开弹窗前 | false | false | 禁用 |
打开弹窗后 | false | true | 可用 |
数据请求前 | true | true | 禁用 |
请求结束&关闭弹窗 | false | false | 禁用 |
相关文章:
![](https://www.ngui.cc/images/no-images.jpg)
elementui弹窗页按钮重复提交问题解决
一、BUG场景 ruoyi平台,页面弹出窗有提交按钮,在提交时连续多次点击会发生重复提交。 二、错误方案 给按钮增加 :loading"submitLoading" 属性。 <el-dialog :title"title" :v-if"open" :visible.sync"open&…...
![](https://img-blog.csdnimg.cn/8d0ac6c2977141fa9b7164e3a2df0fef.png)
HBase-读流程
创建连接同写流程。 (1)读取本地缓存中的Meta表信息;(第一次启动客户端为空) (2)向ZK发起读取Meta表所在位置的请求; (3)ZK正常返回Meta表所在位置&#x…...
![](https://img-blog.csdnimg.cn/c9a9091ce98440a2bedcf9bbeaee07d4.png#)
Matlab绘图 图例legend 太长,怎么减小指示线的长度
来源 绘图时,稍微减小文字已经不能正常放下图例,想通过调整图例指示线段长度缩减整个图例长度。 方法一 参考matlab官方论坛 leg legend(Plot1,Plot2,...); leg.ItemTokenSize [x1,x2]; By default x130 and x218 so put larger or smaller number…...
![](https://img-blog.csdnimg.cn/84e2e319aeb54480a7c2f13b350be197.png)
力扣17(电话号码中的字符组合)
题目表述 给定一个仅包含数字 2-9 的字符串,返回所有它能表示的字母组合。答案可以按 任意顺序 返回。 给出数字到字母的映射如下(与电话按键相同)。注意 1 不对应任何字母。 示例1 输入:digits "23" 输出࿱…...
![](https://img-blog.csdnimg.cn/da739d9406314261aac60a2ad5d2c40f.png)
vue+element 下载压缩包和导出
export function goodsInspectionReportDwnloadZip (params) {return axios({url: "/warehouse-entry-server/v1/goodsInspectionReport/downloadZip",method: "get",params,responseType: "blob"}) } //下载handleDownloadFile() {if (!this.$r…...
![](https://img-blog.csdnimg.cn/fd2ff8c52fc04bc6988a61287d82e028.png)
构建Docker容器监控系统 (1)(Cadvisor +InfluxDB+Grafana)
目录 Cadvisor InfluxDBGrafana 1. Cadvisor 2.InfluxDB 3.Grafana 开始部署: 下载组件镜像 创建自定义网络 创建influxdb容器 创建数据库和数据库用户 创建Cadvisor 容器 准备测试镜像 创建granafa容器 访问granfana 添加数据源 Add data source 新建 …...
![](https://img-blog.csdnimg.cn/5e958cdde9c142c2bd2c7de5ce4eb165.png)
hive编译报错整理
背景 最近在修hive-1.2.0的一个bug,需要修改后重新打包部署到集群,打包的时候报下面的错误,原因很简单,从远程仓库里面已经拉不到这个包了。 org.pentaho:pentaho-aggdesigner-algorithm:jar:5.1.5-jhyde was not found in http…...
![](https://www.ngui.cc/images/no-images.jpg)
centos磁盘爆满可以清理mysql-bin.000011吗
mysql-bin.000011 是 MySQL 的二进制日志文件,用于记录数据库中的更改操作。删除该文件可能会导致数据库恢复、备份和复制等功能的中断或数据丢失。因此,在删除任何 MySQL 的二进制日志文件之前,请确保您了解其潜在影响并采取适当的备份措施。…...
![](https://img-blog.csdnimg.cn/2c0c66c8159b49e28dc0c3fbb488c26e.png)
SSM个人博客项目
文章目录 SSM个人博客系统实现项目介绍 一、准备工作0. 创建项目添加对应依赖1. 数据库设计2. 定时实体类 二、功能实现1.统一功能处理统一返回格式统一异常处理定义登录拦截器 2. 注册登录实现生成获取验证码密码加盐实现注册功能登录功能注销功能 3.登录用户博客列表获取登录…...
![](https://www.ngui.cc/images/no-images.jpg)
vue插槽是什么?如何使用?
1、意义 插槽是vue提供的一个内置组件,是一个占位符。作用是可以向组件中传递一段html代码,加强了组件封装性以及复用性。 2、分类 插槽通常分为匿名插槽、具名插槽、作用域插槽 匿名插槽: 顾名思义就是没有名字的插槽,我们通…...
![](https://www.ngui.cc/images/no-images.jpg)
yum常用操作命令
目录 查询命令 查看当前所有仓库 检查可升级的程序 安装、卸载、升级 清除缓存命令 生成缓存 查询命令 列出已安装的软件包:yum list installed列出仓库中还未安装的软件包:yum list available列出指定软件包的依赖关系:yum deplist &…...
![](https://img-blog.csdnimg.cn/856e907206894995a51be72343ec1ffd.png)
.Net C# 免费PDF合成软件
最近用到pdf合成,发现各种软件均收费啊,这个技术非常简单,别人写好的库一大把,这里用到了PDFsharp,项目地址Home of PDFsharp and MigraDoc Foundation 软件下载地址 https://download.csdn.net/download/g313105910…...
![](https://img-blog.csdnimg.cn/30e51a0a47184da593b2c3db11009286.png)
JAVA集合框架 一:Collection(LIst,Set)和Iterator(迭代器)
目录 一、Java 集合框架体系 1.Collection接口:用于存储一个一个的数据,也称单列数据集合(single)。 2.Map接口:用于存储具有映射关系“key-value对”的集合(couple) 3.Iterator接口&#…...
![](https://img-blog.csdnimg.cn/251fed9f416647918661abaced8765b8.png)
python ffmpeg合并ts文件
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家:点击跳转 当你从网站下载了一集动漫,然后发现是一堆ts文件,虽然可以打开,但是某个都是10秒左右,…...
![](https://img-blog.csdnimg.cn/681f66d3e62041589109ea70c5f43c89.png#pic_center)
c++map和set剖析
文章参考文献:cplusplus 博主:拖拉机厂第一代码手 gitee:拖拉机厂第一代码手 c专栏:C 目录 🧙🏼♂set剖析🧚🏼set简介🧚🏼set模板参数列表🧚🏼s…...
![](https://www.ngui.cc/images/no-images.jpg)
kubernetes configmap 的data中的文件内容格式错乱
截取一段错乱的配置: kubectl -n monitoring get cm blackbox-exporter-configuration -o yaml apiVersion: v1 data:config.yml: "\"modules\":\n \"http_2xx\":\n \"http\":\n \"preferred_ip_protocol\"…...
![](https://www.ngui.cc/images/no-images.jpg)
A TupleBackedMap cannot be modified Mybatis分页,使用List<Map>接参,无法修改map的解决方案
问题描述 当使用Mybatis 进行Page分页,再使用Page< map >作为接受参数。此时尝试修改map则会报错。 报错为 java.lang.UnsupportedOperationException: A TupleBackedMap cannot be modified解决方案 使用新的数组,使用反射,构建工具…...
![](https://img-blog.csdnimg.cn/9b41a4c68ad842b682a0bc603a4dc42b.png)
Leetcode-每日一题【剑指 Offer 13. 机器人的运动范围】
题目 地上有一个m行n列的方格,从坐标 [0,0] 到坐标 [m-1,n-1] 。一个机器人从坐标 [0, 0] 的格子开始移动,它每次可以向左、右、上、下移动一格(不能移动到方格外),也不能进入行坐标和列坐标的数位之和大于k的格子。例…...
![](https://img-blog.csdnimg.cn/c57ddc3bf8a04534ac21f121b5bf2d5f.png)
WEB集群——负载均衡集群
目录 一、 LVS-DR 群集。 1、LVS-DR工作原理 2、LVS-DR模式的特点 3、部署LVS-DR集群 3.1 配置负载调度器(192.168.186.100) 3.2 第一台web节点服务器(192.168.186.103) 3.3 第二台web节点服务器(192.168.186.…...
![](https://img-blog.csdnimg.cn/a1946f8723a04745aabdacc014354690.png)
ubuntu 20.0.4 搭建nvidia 显卡环境
一、安装docker 1、安装dokcer sudo apt install docker.io2、docker 添加到用户组 创建docker用户组 sudo groupadd docker添加当前用户加入docker用户组 sudo usermod -aG docker ${USER}重启docker服务 sudo systemctl restart docker切换或者退出当前账户再从新登入 …...
![](https://img-blog.csdnimg.cn/dba48936da934d9d8f9fe1478fbc35b5.png)
Windows环境下通过 系统定时 执行脚本方式 压缩并备份文件夹 到其他数据盘
环境配置 压缩时需要使用7-zip进行调用,因此根据自己电脑进行安装 官网:https://www.7-zip.org/ 脚本文件 新建记事本文件,重命名为git_back_up.bat echo off rem 设置utf-8可以正常显示中文 chcp 65001 > nulrem 获取当前日期和时间&…...
![](https://www.ngui.cc/images/no-images.jpg)
C++系列二:STL教程-常用算法
提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档 常用算法 前言算法列举:算法例子 前言 还有一些我在尝试中迷惑不解的,有点玄幻。 算法列举: 排序算法: sort(first, last);…...
![](https://img-blog.csdnimg.cn/183c1a182be442e2a46406b921758642.png)
【css】渐变
渐变是设置一种颜色或者多种颜色之间的过度变化。 两种渐变类型: 线性渐变(向下/向上/向左/向右/对角线) 径向渐变(由其中心定义) 1、线性渐变 语法:background-image: linear-gradient(direction, co…...
![](https://img-blog.csdnimg.cn/4d4f04c5cf8c4b58b81a2bc0b5d5c3b7.png)
idea打开多个项目需要开多个窗口(恢复询问弹窗)
【版权所有,文章允许转载,但须以链接方式注明源地址,否则追究法律责任】【创作不易,点个赞就是对我最大的支持】 前言 仅作为学习笔记,供大家参考 总结的不错的话,记得点赞收藏关注哦! 使用…...
![](https://www.ngui.cc/images/no-images.jpg)
篇十三:策略模式:选择不同算法
篇十三:“策略模式:选择不同算法” 设计模式是软件开发中的重要知识,策略模式(Strategy Pattern)是一种行为型设计模式,用于在运行时根据不同的需求选择不同的算法或行为。本文将探讨策略模式的作用和实现…...
![](https://img-blog.csdnimg.cn/22fe512ffcb340fc8a8cd7be1a0f0c89.png)
Centos7.6 安装mysql过程全记录
在centos 7.6上 离线安装mysql 的步骤,可参考下文: 一、查看当前MySQL的安装情况并卸载 1. 查看当前MySQL的安装情况 查找之前是否安装了MySQL rpm -qa|grep -i mysql 2.卸载mysql 如果已经安装mysql,则需要先停止MySQL,再删除…...
![](https://www.ngui.cc/images/no-images.jpg)
Java中的Guava是什么?
Java中的Guava是一个非常强大的Java库,它提供了很多实用的工具类和方法,可以帮助我们更高效地开发Java应用程序。从新手的角度来看,Guava可以让我们在Java编程中变得更加简单、快速和高效。 Guava的命名来源于“Google’s favorite Java lib…...
![](https://www.ngui.cc/images/no-images.jpg)
vue.js兄弟组件方法调用b组件调用a组件方法
vue.js 中兄弟组件方法调用 场景:父组件中同时引入两个子组件(A和B),此时B组件点击按钮需要调用A组件里面的方法 方案1:vue的事件总线 方案2:自定义事件($emit) 最终方案:…...
![](https://www.ngui.cc/images/no-images.jpg)
【Kubernetes】二进制搭建
目录 二进制搭建 Kubernetes v1.20 操作系统初始化配置 关闭防火墙 关闭selinux 关闭swap 根据规划设置主机名 在master添加hosts 调整内核参数 时间同步 部署 etcd 集群 准备签发证书环境 准备cfssl证书生成工具 生成Etcd证书 上传 etcd-cert.sh 和 etcd.sh 到 …...
![](https://img-blog.csdnimg.cn/d07d1578c5394d4b8298faf2c87fe922.png)
【MFC】08.MFC消息,自定义消息,常用控件(MFC菜单创建大总结),工具栏,状态栏-笔记
本专栏上几篇文章讲解了MFC几大机制,今天带领大家学习MFC自定义消息以及常用控件,最常用的控件请查看本专栏第一二篇文章,今天这篇文章介绍工具栏,菜单和状态栏,以及菜单创建大总结。 文章目录 MFC消息分类࿱…...
![](/images/no-images.jpg)
上海招聘网官方网站/网站建设推广多少钱
第2版前言操作系统是现代计算机系统中最重要的系统软件,它控制和管理计算机系统的所有硬件和软件资源,并为用户使用计算机提供一个友好的工作环境。计算机操作系统不仅是计算机专业的必修课程,也是从事计算机应用的人员必不可少的专业知识。L…...
![](https://img-blog.csdnimg.cn/2020060102154781.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3NjkwNzY1,size_16,color_FFFFFF,t_70)
企业营销微网站建设/培训学校
文章目录Leetcode 55. 跳跃游戏问题描述解题报告动态规划贪心算法实现代码动态规划实现贪心算法实现Leetcode 45. 跳跃游戏 II问题描述解题报告动态规划贪心算法实现代码动态规划实现贪心算法实现Leetcode 1306. 跳跃游戏 III问题描述解题报告实现代码Leetcode 1345. 跳跃游戏 …...
![](https://img-blog.csdnimg.cn/a0f059d0b0a64714bb8b69d481348f2f.gif#pic_center)
河间市做网站/徐州百度seo排名
📢前言🌲原题样例:Excel 表列序号🌻C#方法:深度优先搜索🌻Java 方法一:二分查找💬总结🚀往期优质文章分享📢前言 🚀 算法题 🚀 &…...
![](/images/no-images.jpg)
做网站的职位叫什么/百度 官网
作者:gnuhpc 出处:http://www.cnblogs.com/gnuhpc/ public class DynamicParameters {public static void main(String[] args) {add(1,2,3);add(1,2,3,4);}public static void add(int... arr) {//支持可变数目的参数,实际就是一个数组&…...
网站怎么做一次性链接/中山360推广
什么是MIME TypeMIME Type是用于描述文件的类型的一种表述方法,其将文件划分为多种类型,方便对其进行统一的管理。MIME Type指定了文件的类型名称、描述、图标信息,同时通过与.desktop应用程序描述文件整合,指定了文件的打开方式。…...
![](/images/no-images.jpg)
wordpress搭建个人店铺/真正免费的网站建站
今天状态不好,D都差点没有出,发一下,警示一下 https://atcoder.jp/contests/abc223/tasks/abc223_d 拓扑序字典序限制要想到小根堆替换队列 #include<unordered_set> #include<unordered_map> #include<functional> #incl…...