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弹窗页按钮重复提交内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了vue项目运行时出现It works的问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
本文主要介绍了vuex 第三方包实现数据持久化的方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
Element中el-input密码输入框浏览器自动填充账号密码问题的解决方法
自己写了一个管理系统,登录成功之后,浏览器提示我保存账号密码,每次登录时就会自动回填记住的账号密码,方便用户快速登录,下面这篇文章主要给大家介绍了关于Element中el-input密码输入框浏览器自动填充账号密码问题的解决方法,需要的朋友可以参考下2022-09-09
这篇文章主要为大家介绍了vue的可拖拽的瀑布流布局组件有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
这篇文章主要介绍了vue的$http的get请求要加上params操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
文章主要介绍了如何在Vue中实现点击按钮显示菜单的功能,父组件负责触发事件,子组件负责渲染菜单,通过事件冒泡和状态管理,实现了菜单的显示和隐藏,代码示例简洁明了,适合初学者参考2026-03-03
这篇文章主要为大家详细介绍了Vue实现图书管理案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
今天小编就为大家分享一篇Vue前后端不同端口的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了VUEJS实战之修复错误并且美化时间，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-06-06
这篇文章主要为大家详细介绍了vue3.x使用swiper实现卡片轮播，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
最新评论