Vue、element-ui的resetFields()方法重置表單無效問題及解決辦法

問題： 使用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會移除校驗結果

作者：CSDN博主「只想做個好人啊」
原文鏈接：https://blog.csdn.net/haidong55/article/details/90484138