element-ui如何防止重复提交的方法步骤
5星 · 超过95%的资源 119 浏览量
2020-10-15
21:52:07
上传
评论
收藏 94KB PDF 举报 
element-ui如何防止重复提交的方法步骤如何防止重复提交的方法步骤
主要介绍了element-ui如何防止重复提交的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工
作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
先说对话框（Dialog）里的表单提交
错误方案错误方案
说起错误方案，比如，点击提交按钮，本地验证，验证通过立即让按钮不可点，这些没问题，而我的错误点概括是：在某个最
后执行的回调函数的最后一行，我做了2个操作：1，隐藏Dialog，2，让提交按钮可点击。
这个方案看似没问题，做到了让对话框消失，又保证下一次打开Dialog之后，提交按钮是可点击的。但它错误在于：隐藏
Dialog是一个动画过程，并不是瞬间消失，所以按钮恢复可点击之后，Dialog还没有彻底隐藏，所以只要你点得够快，就可以
多点几次按钮。
正确方案正确方案
1. 早在打开对话框的时候，将提交按钮可点击。做法是在<el-dialog>上加入open事件函数：
@open="submitButtonDisabled = false"，其中submitButtonDisabled是我控制提交按钮的变量，你可以改成你自己用
的。
2. 点击之后验证，通过则立即按钮不可点（this.submitButtonDisabled = true），不通过则不做任何针对按钮的处理。（这
是铁律，下面会经常看到）
3. 验证通过的话，最后执行的某个回调函数的最后一行，隐藏对话框。比如this.dialogFormVisible = false，这个变量你也
要改成自己用的。
它的核心是2点：早在打开对话框的时候就让提交按钮可点击；验证通过的话，最后的回调函数不应该去管提交按钮恢复可点
击的事，而是放到下一次打开对话框的时候才让提交按钮可点击。
再说不涉及对话框的提交再说不涉及对话框的提交
不涉及对话框，比如按钮在页面上直接存在，又分三种情况：
1. 点击之后不跳转，但按钮消失
2. 点击之后不跳转，按钮也不消失
3. 点击之后跳转页面
即便是跳转页面，也是需要时间的，这个期间一样可以重复提交。不跳转页面的话，重复提交就更容易发生了。怎么办？
情况情况1：点击之后不跳转，但按钮消失：点击之后不跳转，但按钮消失
这种情况出现在小型提交场合，比如在表格中修改数据，表格中的某个单元格有一个修改按钮，点击之后按钮消失，只留下数
据自己，而且，不允许有成功提示框，因为毕竟是小型提交场合，而且提交按钮消失就已经代表了成功。
这就是三种不同的状态，依次是无数据时、编辑状态时、有数据时
这种情况的处理方案很简单：
1. 点击之后验证，通过则立即不可点，不通过则不针对按钮处理
2. 服务器返回结果之后，保存成功则按钮消失，保存失败则按钮依旧存在。无论成功失败，按钮都要变成可点击。由于这
里按钮消失是瞬间发生，没有动画过程，所以就算按钮变回可点击，也因为它已经消失，因此不会造成重复提交。
这里引出一个问题，就是表格中的小型提交场合，Save按钮会有一竖列，如何准确给某个按钮设置不可点击呢？可以这样：
1. 从服务器获取表格数据之后要做一步加工，遍历数据，加上item.saveButtonDisabled = false之类的语句，然后再赋值给
data子对象。
2. 给按钮绑定方法时，要传参数，element-ui中可以传row，也就是@click="clickSave(row)"。
3. 点击按钮先验证数据，通过则立即row.saveButtonDisabled = true，ajax回调之后就row.saveButtonDisabled = false，就
可以了。
情况情况2：点击之后不跳转，按钮也不消失：点击之后不跳转，按钮也不消失
比如一个表单直接显示在网页中，无论提交多少次，页面都纹丝不动。
这时候再按照上面的情况的处理方案就行不通了，因为比如1秒数据就走了一个来回，那么我每1.1秒点击一次鼠标就可以无限
提交下去。
处理方案：
评论10
最新资源