對(duì)話框中form表單的reset問題

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

解決原理

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

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

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

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

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

解決辦法

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

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

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

element UI form表單重置無效

element 組件庫(kù)里面重置有兩個(gè)方法resetField和clearValidate，但是這兩個(gè)方法，要用這兩個(gè)方法肯定是要用ref實(shí)例化一個(gè)表單，用實(shí)例化的對(duì)象去重置表單，但是經(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: []
? ? ? }
? ? }

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

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

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

最新評(píng)論