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	禁用