elementui弹窗页按钮重复提交问题解决方法
作者：全能打工人
本文主要介绍了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弹窗页按钮重复提交内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！