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

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禁用

相关文章:

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

一、BUG场景 ruoyi平台&#xff0c;页面弹出窗有提交按钮&#xff0c;在提交时连续多次点击会发生重复提交。 二、错误方案 给按钮增加 :loading"submitLoading" 属性。 <el-dialog :title"title" :v-if"open" :visible.sync"open&…...

HBase-读流程

创建连接同写流程。 &#xff08;1&#xff09;读取本地缓存中的Meta表信息&#xff1b;&#xff08;第一次启动客户端为空&#xff09; &#xff08;2&#xff09;向ZK发起读取Meta表所在位置的请求&#xff1b; &#xff08;3&#xff09;ZK正常返回Meta表所在位置&#x…...

Matlab绘图 图例legend 太长,怎么减小指示线的长度

来源 绘图时&#xff0c;稍微减小文字已经不能正常放下图例&#xff0c;想通过调整图例指示线段长度缩减整个图例长度。 方法一 参考matlab官方论坛 leg legend(Plot1,Plot2,...); leg.ItemTokenSize [x1,x2]; By default x130 and x218 so put larger or smaller number…...

力扣17(电话号码中的字符组合)

题目表述 给定一个仅包含数字 2-9 的字符串&#xff0c;返回所有它能表示的字母组合。答案可以按 任意顺序 返回。 给出数字到字母的映射如下&#xff08;与电话按键相同&#xff09;。注意 1 不对应任何字母。 示例1 输入&#xff1a;digits "23" 输出&#xff1…...

vue+element 下载压缩包和导出

export function goodsInspectionReportDwnloadZip (params) {return axios({url: "/warehouse-entry-server/v1/goodsInspectionReport/downloadZip",method: "get",params,responseType: "blob"}) } //下载handleDownloadFile() {if (!this.$r…...

构建Docker容器监控系统 (1)(Cadvisor +InfluxDB+Grafana)

目录 Cadvisor InfluxDBGrafana 1. Cadvisor 2.InfluxDB 3.Grafana 开始部署&#xff1a; 下载组件镜像 创建自定义网络 创建influxdb容器 创建数据库和数据库用户 创建Cadvisor 容器 准备测试镜像 创建granafa容器 访问granfana 添加数据源 Add data source 新建 …...

hive编译报错整理

背景 最近在修hive-1.2.0的一个bug&#xff0c;需要修改后重新打包部署到集群&#xff0c;打包的时候报下面的错误&#xff0c;原因很简单&#xff0c;从远程仓库里面已经拉不到这个包了。 org.pentaho:pentaho-aggdesigner-algorithm:jar:5.1.5-jhyde was not found in http…...

centos磁盘爆满可以清理mysql-bin.000011吗

mysql-bin.000011 是 MySQL 的二进制日志文件&#xff0c;用于记录数据库中的更改操作。删除该文件可能会导致数据库恢复、备份和复制等功能的中断或数据丢失。因此&#xff0c;在删除任何 MySQL 的二进制日志文件之前&#xff0c;请确保您了解其潜在影响并采取适当的备份措施。…...

SSM个人博客项目

文章目录 SSM个人博客系统实现项目介绍 一、准备工作0. 创建项目添加对应依赖1. 数据库设计2. 定时实体类 二、功能实现1.统一功能处理统一返回格式统一异常处理定义登录拦截器 2. 注册登录实现生成获取验证码密码加盐实现注册功能登录功能注销功能 3.登录用户博客列表获取登录…...

vue插槽是什么?如何使用?

1、意义 插槽是vue提供的一个内置组件&#xff0c;是一个占位符。作用是可以向组件中传递一段html代码&#xff0c;加强了组件封装性以及复用性。 2、分类 插槽通常分为匿名插槽、具名插槽、作用域插槽 匿名插槽&#xff1a; 顾名思义就是没有名字的插槽&#xff0c;我们通…...

yum常用操作命令

目录 查询命令 查看当前所有仓库 检查可升级的程序 安装、卸载、升级 清除缓存命令 生成缓存 查询命令 列出已安装的软件包&#xff1a;yum list installed列出仓库中还未安装的软件包&#xff1a;yum list available列出指定软件包的依赖关系&#xff1a;yum deplist &…...

.Net C# 免费PDF合成软件

最近用到pdf合成&#xff0c;发现各种软件均收费啊&#xff0c;这个技术非常简单&#xff0c;别人写好的库一大把&#xff0c;这里用到了PDFsharp&#xff0c;项目地址Home of PDFsharp and MigraDoc Foundation 软件下载地址 https://download.csdn.net/download/g313105910…...

JAVA集合框架 一:Collection(LIst,Set)和Iterator(迭代器)

目录 一、Java 集合框架体系 1.Collection接口&#xff1a;用于存储一个一个的数据&#xff0c;也称单列数据集合&#xff08;single&#xff09;。 2.Map接口&#xff1a;用于存储具有映射关系“key-value对”的集合&#xff08;couple&#xff09; 3.Iterator接口&#…...

python ffmpeg合并ts文件

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家&#xff1a;点击跳转 当你从网站下载了一集动漫&#xff0c;然后发现是一堆ts文件&#xff0c;虽然可以打开&#xff0c;但是某个都是10秒左右&#xff0c;…...

c++map和set剖析

文章参考文献&#xff1a;cplusplus 博主&#xff1a;拖拉机厂第一代码手 gitee:拖拉机厂第一代码手 c专栏&#xff1a;C 目录 &#x1f9d9;&#x1f3fc;‍♂set剖析&#x1f9da;&#x1f3fc;set简介&#x1f9da;&#x1f3fc;set模板参数列表&#x1f9da;&#x1f3fc;s…...

kubernetes configmap 的data中的文件内容格式错乱

截取一段错乱的配置&#xff1a; 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\"…...

A TupleBackedMap cannot be modified Mybatis分页,使用List<Map>接参,无法修改map的解决方案

问题描述 当使用Mybatis 进行Page分页&#xff0c;再使用Page< map >作为接受参数。此时尝试修改map则会报错。 报错为 java.lang.UnsupportedOperationException: A TupleBackedMap cannot be modified解决方案 使用新的数组&#xff0c;使用反射&#xff0c;构建工具…...

Leetcode-每日一题【剑指 Offer 13. 机器人的运动范围】

题目 地上有一个m行n列的方格&#xff0c;从坐标 [0,0] 到坐标 [m-1,n-1] 。一个机器人从坐标 [0, 0] 的格子开始移动&#xff0c;它每次可以向左、右、上、下移动一格&#xff08;不能移动到方格外&#xff09;&#xff0c;也不能进入行坐标和列坐标的数位之和大于k的格子。例…...

WEB集群——负载均衡集群

目录 一、 LVS-DR 群集。 1、LVS-DR工作原理 2、LVS-DR模式的特点 3、部署LVS-DR集群 3.1 配置负载调度器&#xff08;192.168.186.100&#xff09; 3.2 第一台web节点服务器&#xff08;192.168.186.103&#xff09; 3.3 第二台web节点服务器&#xff08;192.168.186.…...

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切换或者退出当前账户再从新登入 …...

Appium+python自动化(十六)- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...

Redis:现代应用开发的高效内存数据存储利器

一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发&#xff0c;其初衷是为了满足他自己的一个项目需求&#xff0c;即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源&#xff0c;Redis凭借其简单易用、…...