elementui弹窗页按钮重复提交问题解决方法
更新时间：2023年08月06日 14:56:51 作者：全能打工人
本文主要介绍了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 | 禁用 |
到此这篇关于elementui弹窗页按钮重复提交问题解决方法的文章就介绍到这了,更多相关element弹窗页按钮重复提交内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue2.0 如何把子组件的数据传给父组件,需要的朋友可以参考下2018-01-01
在现代的前端开发中,我们经常需要使用一些第三方的外部脚本或库,尤其是像地图、图表、分析工具等,在 Vue 项目中,有多种方式可以引入外部脚本,本文将详细介绍在 Vue 项目中引入外部脚本的几种常见方法,需要的朋友可以参考下2025-01-01
这篇文章主要介绍了Vuex给state中的对象新添加属性遇到的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要为大家详细介绍了vue实现多级侧边栏的封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
vue项目打包解决静态资源无法加载和路由加载无效(404)问题
这篇文章主要介绍了vue项目打包，解决静态资源无法加载和路由加载无效(404)问题,静态资源无法使用，那就说明项目打包后，图片和其他静态资源文件相对路径不对,本文给大家介绍的非常详细，需要的朋友跟随小编一起看看吧2023-10-10
这篇文章主要介绍了解决vue打包后vendor.js文件过大问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了Vue2.0系列之过滤器的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
vue中el-date-picker type=daterange日期清空时不回显的解决
这篇文章主要介绍了vue中el-date-picker type=daterange日期清空时不回显的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要给大家介绍了关于vue element-plus图片预览实现的相关资料,最近的项目中有图片预览的场景,也是踩了一些坑,在这里总结一下,需要的朋友可以参考下2023-07-07
这篇文章主要为大家介绍了vue3.2最新语法使用socket.io实现即时通讯详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
最新评论