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