elementui弹窗页按钮重复提交问题解决

一、BUG场景

ruoyi平台，页面弹出窗有提交按钮，在提交时连续多次点击会发生重复提交。

二、错误方案

给按钮增加  :loading="submitLoading" 属性。

<el-dialog :title="title" :v-if="open" :visible.sync="open" @close="cancel" >
    <el-button type="primary" :loading="submitLoading" @click="submitForm">提交</el-button>
</el-dialog>


data() {
    return{
        open: false,
        submitLoading: false,
    }
},

methods: {

    cancel() {
      this.open = false;
      this.submitLoading = false;
    },
    /** 提交按钮 */
    submitForm() {
        ......
        this.submitLoading = true;
        this.api.add(formData).then(response => {
            .....
            this.cancel();
        });
    }
}

验证后发现并没有解决重复提交问题。

查询资料发现：el-dialog的关闭不是瞬间发生，是关闭动画，是动画，真是活久见了。侧面证明自己菜。

三、正确方案

给按钮增加  :loading="submitLoading||!open" 属性。

上面代码中只需要修改loading这一处就行了。

<el-dialog :title="title" :v-if="open" :visible.sync="open" @close="cancel" >
    <el-button type="primary" :loading="submitLoading||!open" @click="submitForm">提交</el-button>
</el-dialog>


data() {
    return{
        open: false,
        submitLoading: false,
    }
},

methods: {

    cancel() {
      this.open = false;
      this.submitLoading = false;
    },
    /** 提交按钮 */
    submitForm() {
        ......
        this.submitLoading = true;
        this.api.add(formData).then(response => {
            .....
            this.cancel();
        });
    }
}

按钮逻辑

行为	按钮submitLoading	弹窗open	按钮状态
打开弹窗前	false	false	禁用
打开弹窗后	false	true	可用
数据请求前	true	true	禁用
请求结束&关闭弹窗	false	false	禁用