表单重复提交的解决方案

表单提交解决方案

场景：

        在提交表单的时候，短时间内快速点击确认按钮，有可能会多次提交表单，造成重复提交相同的内容

解决思路：

        给确定按钮设置一个禁用开关，当点击确定之后，让按钮处于禁用状态，为了有更好的体验可以在按钮禁用期间给一个loading效果，在下一次打开dialog的时候，再让确定按钮的禁用开关打开

解决方案：

1、在html里面给开关添加绑定disabled属性

        <el-button type="primary" :disabled="loadingLogin==true?true:false" @click="submitForm">
            <span v-if="!loadingLogin">确 认</span>
            <span v-else>确 认 中...</span>
        </el-button>

2、在data中写

//确认状态
      loadingLogin:false

3、

4、在下次打开新增按钮触发的dialog的时候，调整确认按钮的开关状态

5、效果和下面登录一样，点击完登录之后让按钮禁用，并且给一个loading效果