問題：

使用this.$ref['form'] .resetFields()無法重置表單項

原因：

1.沒有給表單新增ref屬性

<el-form ref="form"></el-form>

2.表單項el-form-item沒有新增prop屬性，prop屬性需要與input框繫結的屬性一致

<el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
 <el-form-item label="活動名稱" prop="name">
  <el-input v-model="sizeForm.name"></el-input>
 </el-form-item>
</el-form>

3.還有一個經常出現這種問題的場景是，當使用vuex的時候，新建表單與編輯表單複用，此時上述屬性跟方法都添加了也無法達到清除表單的效果。

此時我們再重新看一下element-ui的官方文件

重點：resetField()方法不是將表單重置為空，而是重置為初始值

所以當我們開啟新建表單的時候，表單項繫結的屬性值為空，在提交表單後，表單項繫結的值不為空，此時再開啟新建表單是會有上一次的值出現，此時resetField()方法是無法清空表單的，因為在這次操作的時候，屬性初始值就不為空。

解決方法：

在提交表單成功後對繫結的值進行方法重置

//  重置表單項屬性
resetForm () {
  return {
    remark: '',name: ''
  }
}
 
//  提交表單成功後重新給屬性賦值
submit () {
  //......呼叫成功
  let self = this
  let query = self.resetForm()
  self.updateForm({ //此方法是自定義的vuex的action方法，大家可根據實際應用場景定義重置表單方法
    form: query
  )}
  self.$ref['form'].resetFields()  // 此時再呼叫resetFields()方法是為了清除表單驗證而出現的錯誤
}

在對屬性進行重置後執行resetFields方法，是因為對屬性重置為空時，可能會觸發表單規則的驗證，此時執行resetFields會移除校驗結果

補充知識：vue+element-ui this.$refs[‘‘].resetFields() 重置表單資料不生效問題

element 的 Form 元件提供了表單驗證的功能，需要通過 rules 屬性傳入約定的驗證規則，並將 Form-Item 的 prop 屬性設定為需校驗的欄位名。

有兩點需要注意：

1.要有對應的 ref，且名字一致，表明重置哪個表單。

2.prop 設定的欄位名要和 v-model 繫結的欄位名一致，否則重置表單或進行自定義校驗規則時不會生效。

僅使用重置功能時具體校驗規則不必填，但要重置的欄位一定要有對應的 prop。

以上這篇快速解決Vue、element-ui的resetFields()方法重置表單無效的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。