Element?ui關(guān)閉el-dialog時如何清除數(shù)據(jù)
更新時間：2024年02月29日 10:28:40 作者：Temptat14x
這篇文章主要介紹了Element?ui關(guān)閉el-dialog時如何清除數(shù)據(jù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
element ui關(guān)閉el-dialog時清除數(shù)據(jù)
如果是按叉叉關(guān)閉或者點(diǎn)表單以外空白處關(guān)閉的話
可以給el-dialog添加
:before-close="closeForm"
在methods里添加函數(shù)
closeForm(){
this.$refs.form.resetFields();//清除數(shù)據(jù)
this.dialogFormVisible=false;//關(guān)閉對話框
}如果是按取消按鈕清除數(shù)據(jù)，也可以給取消按鈕綁定點(diǎn)擊事件，點(diǎn)擊取消則調(diào)用closeForm函數(shù)。
注意：
1.要為每個 form-item 加上 prop 屬性，要不然無法清空
2.resetFields() 方法是重置表單，重置為初始值，而不是設(shè)置為空值
element ui對話框el-dialog關(guān)閉事件,清空填寫的數(shù)據(jù)
通常會有需求，在關(guān)閉彈框后需要清空填寫的數(shù)據(jù)，這時候就需要關(guān)閉事件了
<el-dialog title="標(biāo)題" :visible.sync="bind" size="small" @close='closeDialog'> </el-dialog>
在標(biāo)簽中加入@close='closeDialog'
mothods中加入
//關(guān)閉彈框的事件
closeDialog(){
this.xxx = '';//清空數(shù)據(jù)
},總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中使用v-if,v-else來設(shè)置css樣式的步驟
我們在使用vue項目開發(fā)時，v-if是使用的非常多的，在這里我們談?wù)勅绾问褂胿-i來綁定修改css樣式，使用的主要是雙向數(shù)據(jù)綁定，即通過改變他的狀態(tài)來改變他的樣式，這篇文章主要介紹了vue中如何使用v-if,v-else來設(shè)置css樣式,需要的朋友可以參考下2023-03-03
Vite是一個面向現(xiàn)代瀏覽器的一個更輕、更快的?Web?應(yīng)用開發(fā)工具,下面這篇文章主要給大家介紹了關(guān)于如何使用Vue3+Vite+TS快速搭建一套實用腳手架的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
一文詳解Vue3組件通信輕松玩轉(zhuǎn)復(fù)雜數(shù)據(jù)流
在大型Vue項目中,組件通信如同神經(jīng)網(wǎng)絡(luò)般貫穿整個應(yīng)用,這篇文章將為大家詳細(xì)介紹一下Vue3中的組件通信方式,有需要的小伙伴可以了解下2025-02-02
Vue3學(xué)習(xí)筆記之依賴注入Provide/Inject
provide和inject可以實現(xiàn)嵌套組件之間進(jìn)行傳遞數(shù)據(jù),這兩個函數(shù)都是在setup函數(shù)中使用的,下面這篇文章主要給大家介紹了關(guān)于Vue3學(xué)習(xí)筆記之依賴注入Provide?/?Inject的相關(guān)資料,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了vue spa應(yīng)用中的路由緩存問題與解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了vue中pc移動滾動穿透問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue組件化(ref,props,?mixin,.插件)詳解
這篇文章主要介紹了Vue組件化(ref,?props,?mixin,?插件)的相關(guān)知識,包括ref屬性，props配置項及mixin混入的方式，本文通過示例代碼多種方式相結(jié)合給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-05-05
Vue3中watch監(jiān)聽器及源碼學(xué)習(xí)
本文主要介紹了Vue3中watch監(jiān)聽器及源碼學(xué)習(xí),Watch偵聽器在Vue3中特性進(jìn)行了一些改變和優(yōu)化,下面來詳解的介紹一下基本使用,具有一定的參考價值,感興趣的可以了解一下2024-01-01
下面小編就為大家分享一篇Vue cli 引入第三方JS和CSS的常用方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
vue3成功創(chuàng)建項目后?run?serve啟動項目報錯的解決
這篇文章主要介紹了vue3成功創(chuàng)建項目后?run?serve啟動項目報錯的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03