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

错误方案

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

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

正确方案

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

它的核心是2点：早在打开对话框的时候就让提交按钮可点击；验证通过的话，最后的回调函数不应该去管提交按钮恢复可点击的事，而是放到下一次打开对话框的时候才让提交按钮可点击。

再说不涉及对话框的提交

不涉及对话框，比如按钮在页面上直接存在，又分三种情况：

点击之后不跳转，但按钮消失 点击之后不跳转，按钮也不消失 点击之后跳转页面

即便是跳转页面，也是需要时间的，这个期间一样可以重复提交。不跳转页面的话，重复提交就更容易发生了。怎么办？

情况1：点击之后不跳转，但按钮消失

这种情况出现在小型提交场合，比如在表格中修改数据，表格中的某个单元格有一个修改按钮，点击之后按钮消失，只留下数据自己，而且，不允许有成功提示框，因为毕竟是小型提交场合，而且提交按钮消失就已经代表了成功。

这就是三种不同的状态，依次是无数据时、编辑状态时、有数据时

这种情况的处理方案很简单：

点击之后验证，通过则立即不可点，不通过则不针对按钮处理 服务器返回结果之后，保存成功则按钮消失，保存失败则按钮依旧存在。无论成功失败，按钮都要变成可点击。由于这里按钮消失是瞬间发生，没有动画过程，所以就算按钮变回可点击，也因为它已经消失，因此不会造成重复提交。

这里引出一个问题，就是表格中的小型提交场合，Save按钮会有一竖列，如何准确给某个按钮设置不可点击呢？可以这样：

从服务器获取表格数据之后要做一步加工，遍历数据，加上item.saveButtonDisabled = false之类的语句，然后再赋值给data子对象。 给按钮绑定方法时，要传参数，element-ui中可以传row，也就是@click="clickSave(row)"。 点击按钮先验证数据，通过则立即row.saveButtonDisabled = true，ajax回调之后就row.saveButtonDisabled = false，就可以了。

情况2：点击之后不跳转，按钮也不消失

比如一个表单直接显示在网页中，无论提交多少次，页面都纹丝不动。

这时候再按照上面的情况的处理方案就行不通了，因为比如1秒数据就走了一个来回，那么我每1.1秒点击一次鼠标就可以无限提交下去。

处理方案：

首先，应该避免做这种“无论提交多少次，页面都纹丝不动”的设定，应该做到ajax返回OK之前，提交按钮是失效的，OK了就让提交按钮可点击，并且要弹个提示框，这个提示框就可以阻断连续提交。这里面还是有一个问题就是，如果在返回OK之后、提示框使用了Dialog，那么弹出的过程中点击了提交按钮，依然是可以提交的，因为还是那个动画问题，提示框弹出是需要时间的。这时候也好办，别用Dialog，用MessageBox就可以了，它有回调函数，在回调函数里让提交按钮可点击，就行了。