element-ui如何防止重复提交的方法步骤如何防止重复提交的方法步骤
先说对话框（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)”。
评论0