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

最新推荐文章于 2023-08-17 17:08:52 发布

全能打工人

最新推荐文章于 2023-08-17 17:08:52 发布

阅读量1k

点赞数

文章标签： elementui 前端

本文链接：https://blog.csdn.net/xieedeni/article/details/132105985

版权

文章讲述了在ruoyi平台中，弹出窗口的提交按钮连续点击导致重复提交的问题。首先尝试通过增加loading属性来防止，但未解决问题。最终解决方案是修改loading属性为loading||!open，确保在打开弹窗时禁用提交按钮。

摘要由CSDN通过智能技术生成

一、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	禁用