elementui彈窗頁(yè)按鈕重復(fù)提交問題解決方法
更新時(shí)間：2023年08月06日 14:56:51 作者：全能打工人
本文主要介紹了elementui彈窗頁(yè)按鈕重復(fù)提交問題解決方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(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)并沒有解決重復(fù)提交問題。
查詢資料發(fā)現(xiàn)：el-dialog的關(guān)閉不是瞬間發(fā)生，是關(guān)閉動(dòng)畫，是動(dòng)畫，真是活久見了。側(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) |
| 打開彈窗前 | false | false | 禁用 |
| 打開彈窗后 | false | true | 可用 |
| 數(shù)據(jù)請(qǐng)求前 | true | true | 禁用 |
| 請(qǐng)求結(jié)束&關(guān)閉彈窗 | false | false | 禁用 |
到此這篇關(guān)于elementui彈窗頁(yè)按鈕重復(fù)提交問題解決方法的文章就介紹到這了,更多相關(guān)element彈窗頁(yè)按鈕重復(fù)提交內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue項(xiàng)目運(yùn)行時(shí)出現(xiàn)It works的問題解決
本文主要介紹了vue項(xiàng)目運(yùn)行時(shí)出現(xiàn)It works的問題解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
vuex 第三方包實(shí)現(xiàn)數(shù)據(jù)持久化的方法
本文主要介紹了vuex 第三方包實(shí)現(xiàn)數(shù)據(jù)持久化的方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Element中el-input密碼輸入框?yàn)g覽器自動(dòng)填充賬號(hào)密碼問題的解決方法
自己寫了一個(gè)管理系統(tǒng),登錄成功之后,瀏覽器提示我保存賬號(hào)密碼,每次登錄時(shí)就會(huì)自動(dòng)回填記住的賬號(hào)密碼,方便用戶快速登錄,下面這篇文章主要給大家介紹了關(guān)于Element中el-input密碼輸入框?yàn)g覽器自動(dòng)填充賬號(hào)密碼問題的解決方法,需要的朋友可以參考下2022-09-09
這篇文章主要為大家介紹了vue的可拖拽的瀑布流布局組件有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
vue的$http的get請(qǐng)求要加上params操作
這篇文章主要介紹了vue的$http的get請(qǐng)求要加上params操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue實(shí)現(xiàn)點(diǎn)擊出現(xiàn)按鈕菜單問題
文章主要介紹了如何在Vue中實(shí)現(xiàn)點(diǎn)擊按鈕顯示菜單的功能,父組件負(fù)責(zé)觸發(fā)事件,子組件負(fù)責(zé)渲染菜單,通過事件冒泡和狀態(tài)管理,實(shí)現(xiàn)了菜單的顯示和隱藏,代碼示例簡(jiǎn)潔明了,適合初學(xué)者參考2026-03-03
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)圖書管理案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
今天小編就為大家分享一篇Vue前后端不同端口的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
VUEJS實(shí)戰(zhàn)之修復(fù)錯(cuò)誤并且美化時(shí)間（2）
這篇文章主要為大家詳細(xì)介紹了VUEJS實(shí)戰(zhàn)之修復(fù)錯(cuò)誤并且美化時(shí)間，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06
vue3.x使用swiper實(shí)現(xiàn)卡片輪播
這篇文章主要為大家詳細(xì)介紹了vue3.x使用swiper實(shí)現(xiàn)卡片輪播，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07