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