elementui pop-up page button repeated submission problem solving

1. BUG scenario

On the ruoyi platform, the page pop-up window has a submit button. If you click it multiple times during submission, repeated submission will occur.

2. Wrong plan

Add :loading="submitLoading" attribute to the button.

<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();
        });
    }
}

After verification, it was found that the duplicate submission problem was not solved.

After querying the data, we found that: The closing of el-dialog does not happen instantly, it is a closing animation, and it is an animation . It has been a long time coming. Prove yourself on the side.

3. The correct solution

Add the  :loading="submitLoading||!open" attribute to the button.

In the above code, you only need to modify the loading part.

<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();
        });
    }
}

button logic

Behavior	buttonsubmitLoading	Pop-up window open	button state
Before opening the pop-up window	false	false	Disable
After opening the pop-up window	false	true	available
Before data request	true	true	Disable
End of request & close the popup window	false	false	Disable