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