以下幾點值得注意：
<FormItem>要加上prop屬性糜芳，并且與你v-model的值相同才可以
FormItem中v-model的值在data要有初始值,因為form表單的重置是以第一次賦值的數(shù)據(jù)作為重置標準,所有如果沒有初始值旋炒，則是以你第一次輸入的值為準，那么你重置后當然還是你輸入的值不會有變化。所以...要么你需要在data先初始化一下表單綁定的值（字段不多情況下我建議這么做，也是比較規(guī)范的），
方法1：（data先初始化表單綁定值）
<el-dialog :visible="dialogVisible" title="編輯" width="60%" center>
<el-form :form="formData" >...<el-form>
</el-dialog>
data(){
return{
dialogVisible:false,
formData:{
name:"",
phone:"",
address::"",
...
},
}
},
methods: {
showDialog(formName){
this.dialogVisible = !this.dialogVisible //隱藏和顯示
this.$nextTick(()=>{
this.$refs[formName].resetFields();//清空表單
})
}
}
或者像下面這樣在this.$refs[str].resetFields()執(zhí)行前初始化：
<el-dialog :visible="dialogVisible" title="編輯" width="60%" center>
<el-form :form="formData" >...<el-form>
</el-dialog>
data(){
return{
dialogVisible:false,
formData:{},
}
},
methods: {
showDialog(formName){
this.dialogVisible = !this.dialogVisible //隱藏和顯示
//初始化綁定數(shù)據(jù)
this.formData = {
name: '',
phone: ''
};
或者 字段多直接this.edit.form={}置空憋他，表單如果有綁定v-model會幫你重新創(chuàng)建這些對象屬性
this.$nextTick(()=>{
this.$refs[formName].resetFields();//清空表單
})
}
}
注：如果是這個重置過程是寫在diaog打開事件或顯示變量控制的時候，由于element模態(tài)框有懶加載髓削，顯示的過程DOM沒有馬上加載竹挡，有個異步過程，所以this.
nexTick來解決一下DOM延遲更新的問題（即等DOM更新后才去執(zhí)行這個重置操作）揪罕，然而關(guān)閉事件是可以獲取到DOM的梯码，可以直接使用this.$refs[formName].resetFields()
this.$nextTick(()=>{
console.log(this.$refs[formName])
this.$refs[formName].resetFields();//清空表單
})
方法二：
或者你也可以試試利用v-if的特性，打開模態(tài)框的同時進行form的銷毀和重建好啰，強行讓每一次改操作拿到的數(shù)據(jù)為傳說中的初始值轩娶。(網(wǎng)上有這種方法，我實驗過是不行框往，添加表單數(shù)據(jù)后盡管進行form的銷毀和重建但每次打開只要data有綁定數(shù)據(jù)還是會自動雙向綁定上去鳄抒，像下面這樣只是能清除錯誤提示 orz......,)
<el-dialog :visible="dialogVisible" title="編輯" width="60%" center>
<el-form v-if="dialogVisible" :form="formData" >...<el-form>
</el-dialog>
data(){
return{
dialogVisible:false,
formData:{},
}
},
//顯示、隱藏模態(tài)框
methods: {
//顯示椰弊、隱藏模態(tài)框
showDialog(){
this.dialogVisible = !this.dialogVisible //隱藏和顯示
}
}
所以......綜上：既可以清除表單數(shù)據(jù)內(nèi)容又可以清除錯誤提示的最簡單的方法是以上兩種方法結(jié)合起來：
<el-dialog :visible="dialogVisible" title="編輯" width="60%" center>
<el-form v-if="dialogVisible" :form="formData" >...<el-form>
</el-dialog>
data(){
return{
dialogVisible:false,
formData:{},
}
},
methods: {
//顯示许溅、隱藏模態(tài)框
showDialog(){
this.formData={}//清空表單數(shù)據(jù)
this.dialogVisible = !this.dialogVisible //隱藏和顯示
}
}
補充，若使用的是element 的 Dialog 模態(tài)框秉版，可以使用它自帶的屬性 destroy-on-close 設(shè)置為true即可贤重，每次打開關(guān)閉模態(tài)框會自動清除上一次的狀態(tài)，比較實用
注意以上幾個問題應(yīng)該ok了清焕！
