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

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...

Linux云原生安全:零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

Java入门学习详细版(一)

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

C++.OpenGL (14/64)多光源(Multiple Lights)

多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

第7篇:中间件全链路监控与 SQL 性能分析实践

7.1 章节导读 在构建数据库中间件的过程中&#xff0c;可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中&#xff0c;必须做到&#xff1a; &#x1f50d; 追踪每一条 SQL 的生命周期&#xff08;从入口到数据库执行&#xff09;&#…...

在 Spring Boot 中使用 JSP

jsp&#xff1f; 好多年没用了。重新整一下 还费了点时间&#xff0c;记录一下。 项目结构&#xff1a; pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://ww…...

十九、【用户管理与权限 - 篇一】后端基础:用户列表与角色模型的初步构建

【用户管理与权限 - 篇一】后端基础:用户列表与角色模型的初步构建 前言准备工作第一部分:回顾 Django 内置的 `User` 模型第二部分:设计并创建 `Role` 和 `UserProfile` 模型第三部分:创建 Serializers第四部分:创建 ViewSets第五部分:注册 API 路由第六部分:后端初步测…...