elementui彈窗頁按鈕重復提交問題解決方法
更新時間：2023年08月06日 14:56:51 作者：全能打工人
本文主要介紹了elementui彈窗頁按鈕重復提交問題解決方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
一、BUG場景
ruoyi平臺，頁面彈出窗有提交按鈕，在提交時連續(xù)多次點擊會發(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ā)現(xiàn)：el-dialog的關閉不是瞬間發(fā)生，是關閉動畫，是動畫，真是活久見了。側面證明自己菜。
三、正確方案
給按鈕增加 :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 | 禁用 |
| 請求結束&關閉彈窗 | false | false | 禁用 |
到此這篇關于elementui彈窗頁按鈕重復提交問題解決方法的文章就介紹到這了,更多相關element彈窗頁按鈕重復提交內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue2.0 如何把子組件的數(shù)據(jù)傳給父組件(推薦)
這篇文章主要介紹了vue2.0 如何把子組件的數(shù)據(jù)傳給父組件,需要的朋友可以參考下2018-01-01
在現(xiàn)代的前端開發(fā)中,我們經(jīng)常需要使用一些第三方的外部腳本或庫,尤其是像地圖、圖表、分析工具等,在 Vue 項目中,有多種方式可以引入外部腳本,本文將詳細介紹在 Vue 項目中引入外部腳本的幾種常見方法,需要的朋友可以參考下2025-01-01
這篇文章主要介紹了Vuex給state中的對象新添加屬性遇到的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家詳細介紹了vue實現(xiàn)多級側邊欄的封裝，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
vue項目打包解決靜態(tài)資源無法加載和路由加載無效(404)問題
這篇文章主要介紹了vue項目打包，解決靜態(tài)資源無法加載和路由加載無效(404)問題,靜態(tài)資源無法使用，那就說明項目打包后，圖片和其他靜態(tài)資源文件相對路徑不對,本文給大家介紹的非常詳細，需要的朋友跟隨小編一起看看吧2023-10-10
這篇文章主要介紹了解決vue打包后vendor.js文件過大問題，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了Vue2.0系列之過濾器的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
vue中el-date-picker type=daterange日期清空時不回顯的解決
這篇文章主要介紹了vue中el-date-picker type=daterange日期清空時不回顯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
vue?element-plus圖片預覽實現(xiàn)方法
這篇文章主要給大家介紹了關于vue?element-plus圖片預覽實現(xiàn)的相關資料,最近的項目中有圖片預覽的場景,也是踩了一些坑,在這里總結一下,需要的朋友可以參考下2023-07-07
vue3.2最新語法使用socket.io實現(xiàn)即時通訊詳解
這篇文章主要為大家介紹了vue3.2最新語法使用socket.io實現(xiàn)即時通訊詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06