element-ui中如何设置防止表单重复提交的具体步骤？

本文共计2798个文字，预计阅读时间需要12分钟。

首先介绍对话框（Dialog）中的表单提交、错误方案、说法错误方案。例如，点击提交按钮，本地验证，验证通过立即让按钮不可点。这些都没问题，我的错误点概要是：在某个最后执行的回调中。

先说对话框（Dialog）里的表单提交

错误方案

说起错误方案，比如，点击提交按钮，本地验证，验证通过立即让按钮不可点，这些没问题，而我的错误点概括是：在某个最后执行的回调函数的最后一行，我做了2个操作：1，隐藏Dialog，2，让提交按钮可点击。

这个方案看似没问题，做到了让对话框消失，又保证下一次打开Dialog之后，提交按钮是可点击的。但它错误在于：隐藏Dialog是一个动画过程，并不是瞬间消失，所以按钮恢复可点击之后，Dialog还没有彻底隐藏，所以只要你点得够快，就可以多点几次按钮。

正确方案

1. 早在打开对话框的时候，将提交按钮可点击。做法是在<el-dialog>上加入open事件函数：@open="submitButtonDisabled = false"，其中submitButtonDisabled是我控制提交按钮的变量，你可以改成你自己用的。
2. 点击之后验证，通过则立即按钮不可点（this.submitButtonDisabled = true），不通过则不做任何针对按钮的处理。（这是铁律，下面会经常看到）
3. 验证通过的话，最后执行的某个回调函数的最后一行，隐藏对话框。比如this.dialogFormVisible = false，这个变量你也要改成自己用的。