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弹窗页按钮重复提交内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue3新特性Suspense和Teleport应用场景分析
本文介绍了Vue2和Vue3中的Suspense用于处理异步请求的加载提示,以及如何在组件间实现动态加载,同时,Teleport技术展示了如何在DOM中灵活地控制组件的渲染位置,解决布局问题,感兴趣的朋友跟随小编一起看看吧2024-07-07
这篇文章主要介绍了Vue项目自动转换 px 为 rem的实现方法，本文是通过一系列的配置后，转换成热门，具体内容详情大家跟随小编一起通过本文学习吧2018-10-10
React 的 React.lazy 功能为组件懒加载提供了原生支持,允许开发者将组件渲染推迟到实际需要时再进行,虽然 Vue3.x 没有一个直接对应的 lazy 函数,但我们可以通过动态导入和 defineAsyncComponent 方法来实现类似的效果,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了vue子组件中mounted取不到props中的值情况，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
vue+vue-fullpage实现整屏滚动页面的示例代码(直播平台源码)
这篇文章主要介绍了vue+vue-fullpage实现整屏滚动页面,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
这篇文章主要为大家详细介绍了vue实现页面打印自动分页的两种方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了Vue.js上传图片到阿里云OSS存储的方法示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。这篇文章主要介绍了Vue.js快速入门实例教程的相关资料,需要的朋友可以参考下2016-10-10
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
这篇文章主要介绍了详解如何实现Element树形控件Tree在懒加载模式下的动态更新，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
本篇文章主要介绍了详解从新建vue项目到引入组件Element的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
最新评论