問題：
使用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.還有一個經(jīng)常出現(xiàn)這種問題的場景是，當使用vuex的時候，新建表單與編輯表單復用，此時上述屬性跟方法都添加了也無法達到清除表單的效果。

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

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

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

解決方法：
在提交表單成功后對綁定的值進行方法重置

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

在對屬性進行重置后執(zhí)行resetFields方法，是因為對屬性重置為空時，可能會觸發(fā)表單規(guī)則的驗證，此時執(zhí)行resetFields會移除校驗結果

總結

以上是生活随笔為你收集整理的Vue、element-ui的resetFields()方法重置表单无效问题及解决办法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。