對話框中form表單的reset問題

一般在新增和編輯的時候用的都是同一個對話框和form表單，而在先點(diǎn)擊編輯的時候form表單的resetfileds函數(shù)就會失效

解決原理

實(shí)際上結(jié)構(gòu)是（通過vue類比）

• data里面有一個form表單的初始值，
• methods里面定義了一個resetfileds的函數(shù)
• resetfileds函數(shù)的作用:記錄在mounted生命周期執(zhí)行之前最后一次form表單中對象的值,并且重新開啟效驗(yàn)

在mounted周期中resetfileds函數(shù)會自動執(zhí)行一次

實(shí)際運(yùn)行：當(dāng)?shù)谝淮吸c(diǎn)開dialog的時候，form對象第一次被創(chuàng)建，dom加載，即自動運(yùn)行一次resetfileds函數(shù)（此時已經(jīng)記錄了初始值）

在后面當(dāng)再一次調(diào)用resetfileds函數(shù)的時候就會把函數(shù)中記錄的對象值賦給form表單，所以如果是先點(diǎn)擊編輯的情況下，form表單在點(diǎn)擊新增時不會清空數(shù)據(jù)

解決辦法

1：可以再新增時手動清除數(shù)據(jù)（缺點(diǎn)：此時resetfileds函數(shù)中記錄的值并沒有改變，還是當(dāng)時第一次點(diǎn)擊編輯的時候賦的值，但不影響使用）

2：第一次加載dom時如果要修改data中定義的form對象值，那么要將修改操作放在form表單dom元素加載完以后，即mounted生命周期之后（比較推薦的方式）

代碼：第一次加載dom時如果要修改data中定義的form對象值，放在$nextTick中執(zhí)行（即等待resetfileds函數(shù)執(zhí)行以后再去把編輯或者新增的值賦值給form表單，這樣子，resetfileds函數(shù)記錄的就是form表單中data定義的初始化值）

element UI form表單重置無效

element 組件庫里面重置有兩個方法resetField和clearValidate，但是這兩個方法，要用這兩個方法肯定是要用ref實(shí)例化一個表單，用實(shí)例化的對象去重置表單，但是經(jīng)常性的無效

實(shí)例化是

<el-form ref="operateForm" :model="form" :rules="rules">

使用方式經(jīng)常是

this.$refs['operateForm'] && this.$refs['operateForm'].clearValidate()

說下解決

resetForm() {?? ?//?? ?注意：在這個方法中重置
? ? ? this.image = []
? ? ? this.form = {
? ? ? ? images: []
? ? ? }
? ? }

手動重置表單數(shù)據(jù)，然后用方法去重置規(guī)則狀態(tài)

this.$refs['operateForm'] && this.$refs['operateForm'].clearValidate()?? ?
//注意：在進(jìn)到表單之前重置，我這邊的話是彈框，我寫在打開彈框的方法中的

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論