vue+elementui(對話框中form表單的reset問題)
對話框中form表單的reset問題
一般在新增和編輯的時(shí)候用的都是同一個(gè)對話框和form表單，而在先點(diǎn)擊編輯的時(shí)候form表單的resetfileds函數(shù)就會失效
解決原理
實(shí)際上結(jié)構(gòu)是（通過vue類比）
data里面有一個(gè)form表單的初始值，methods里面定義了一個(gè)resetfileds的函數(shù)resetfileds函數(shù)的作用:記錄在mounted生命周期執(zhí)行之前最后一次form表單中對象的值,并且重新開啟效驗(yàn)
在mounted周期中resetfileds函數(shù)會自動執(zhí)行一次
實(shí)際運(yùn)行：當(dāng)?shù)谝淮吸c(diǎn)開dialog的時(shí)候，form對象第一次被創(chuàng)建，dom加載，即自動運(yùn)行一次resetfileds函數(shù)（此時(shí)已經(jīng)記錄了初始值）
在后面當(dāng)再一次調(diào)用resetfileds函數(shù)的時(shí)候就會把函數(shù)中記錄的對象值賦給form表單，所以如果是先點(diǎn)擊編輯的情況下，form表單在點(diǎn)擊新增時(shí)不會清空數(shù)據(jù)
解決辦法
1：可以再新增時(shí)手動清除數(shù)據(jù)（缺點(diǎn)：此時(shí)resetfileds函數(shù)中記錄的值并沒有改變，還是當(dāng)時(shí)第一次點(diǎn)擊編輯的時(shí)候賦的值，但不影響使用）
2：第一次加載dom時(shí)如果要修改data中定義的form對象值，那么要將修改操作放在form表單dom元素加載完以后，即mounted生命周期之后（比較推薦的方式）
代碼：第一次加載dom時(shí)如果要修改data中定義的form對象值，放在$nextTick中執(zhí)行（即等待resetfileds函數(shù)執(zhí)行以后再去把編輯或者新增的值賦值給form表單，這樣子，resetfileds函數(shù)記錄的就是form表單中data定義的初始化值）
element UI form表單重置無效
element 組件庫里面重置有兩個(gè)方法resetField和clearValidate，但是這兩個(gè)方法，要用這兩個(gè)方法肯定是要用ref實(shí)例化一個(gè)表單，用實(shí)例化的對象去重置表單，但是經(jīng)常性的無效
實(shí)例化是
<el-form ref="operateForm" :model="form" :rules="rules">
使用方式經(jīng)常是
this.$refs['operateForm'] && this.$refs['operateForm'].clearValidate()
說下解決
resetForm() {?? ?//?? ?注意：在這個(gè)方法中重置
? ? ? this.image = []
? ? ? this.form = {
? ? ? ? images: []
? ? ? }
? ? }手動重置表單數(shù)據(jù)，然后用方法去重置規(guī)則狀態(tài)
this.$refs['operateForm'] && this.$refs['operateForm'].clearValidate()?? ? //注意：在進(jìn)到表單之前重置，我這邊的話是彈框，我寫在打開彈框的方法中的
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)可移動的懸浮按鈕，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
vue?cesium加載點(diǎn)與定位到指定位置的實(shí)現(xiàn)方法
Cesium是一個(gè)用于創(chuàng)建高性能、跨平臺的3D地球和地圖的開源JavaScript庫,它提供了許多功能,包括地理空間數(shù)據(jù)可視化、地理定位和地圖導(dǎo)航等,這篇文章主要介紹了vue?cesium加載點(diǎn)與定位到指定位置,需要的朋友可以參考下2024-03-03
今天小編就為大家分享一篇淺談vue方法內(nèi)的方法使用this的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
VUE + OPENLAYERS實(shí)現(xiàn)實(shí)時(shí)定位功能
本系列文章介紹一個(gè)簡單的實(shí)時(shí)定位示例，基于VUE + OPENLAYERS實(shí)現(xiàn)實(shí)時(shí)定位功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-09-09
這篇文章主要介紹了vue 設(shè)置背景顏色及透明度的操作，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-06-06
本文主要介紹了vue3+pinia用戶信息持久緩存token的問題解決,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要介紹了關(guān)于VueRouter導(dǎo)入的全過程，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue + typescript + 極驗(yàn)登錄驗(yàn)證的實(shí)現(xiàn)方法
這篇文章主要介紹了vue + typescript + 極驗(yàn) 登錄驗(yàn)證的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
Vue引入jquery實(shí)現(xiàn)平滑滾動到指定位置
這篇文章主要介紹了Vue引入jquery實(shí)現(xiàn)平滑滾動到指定位置的效果，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-05-05
前端Vue?select下拉框使用以及監(jiān)聽事件詳解
由于前端項(xiàng)目使用的是Vue.js和bootstrap整合開發(fā),中間用到了select下拉框,這篇文章主要給大家介紹了關(guān)于前端Vue?select下拉框使用以及監(jiān)聽事件的相關(guān)資料,需要的朋友可以參考下2024-03-03