欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

elementui彈窗頁(yè)按鈕重復(fù)提交問(wèn)題解決方法

 更新時(shí)間：2023年08月06日 14:56:51   作者：全能打工人  
本文主要介紹了elementui彈窗頁(yè)按鈕重復(fù)提交問(wèn)題解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一、BUG場(chǎng)景

ruoyi平臺(tái)，頁(yè)面彈出窗有提交按鈕，在提交時(shí)連續(xù)多次點(diǎn)擊會(huì)發(fā)生重復(fù)提交。

二、錯(cuò)誤方案

給按鈕增加  :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();
        });
    }
}

驗(yàn)證后發(fā)現(xiàn)并沒(méi)有解決重復(fù)提交問(wèn)題。

查詢資料發(fā)現(xiàn)：el-dialog的關(guān)閉不是瞬間發(fā)生，是關(guān)閉動(dòng)畫(huà)，是動(dòng)畫(huà)，真是活久見(jiàn)了。側(cè)面證明自己菜。

三、正確方案

給按鈕增加  :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按鈕狀態(tài)
打開(kāi)彈窗前falsefalse禁用
打開(kāi)彈窗后falsetrue可用
數(shù)據(jù)請(qǐng)求前truetrue禁用
請(qǐng)求結(jié)束&關(guān)閉彈窗falsefalse禁用

 到此這篇關(guān)于elementui彈窗頁(yè)按鈕重復(fù)提交問(wèn)題解決方法的文章就介紹到這了,更多相關(guān)element彈窗頁(yè)按鈕重復(fù)提交內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論