關於element-ui resetFields重置方法無效問題及解決

Posted on by

element-ui resetFields重置方法無效

目前發現resetFields()，有以下兩種情況可能會導致失效：

情況1.el-form-item沒有加上prop屬性

需要重置的表單項el-form-item必須要加上prop屬性，並且prop屬性的值必須和數據雙向綁定的值最後面保持一致

element-ui 提供的文檔如圖： 

圖例如下：

情況2.在mounted之前給表單賦值（mounted DOM未掛載完成）

在mounted之前賦值會被當成是初始值，而resetFields方法是將值重置為初始值而不是清空。所以導致沒有清空數據。

解決辦法

法一：表單在mounted再賦值

法二：使用this.$nextTick(() => { // 這裡開始賦值 this.form.xx = xx; })

element-ui表單重置函數resetFields();使用註意事項

在表單重置的時候我們習慣使用this.$refs[formName].resetFields();來重置表單，但有時候會出現重置不完全的情況，例如：

表單綁定的變量：

formData:{ id:null, name:null , age:null}

表單html：

<el-form ref="form" :model="formData" label-width="80px" size="mini">
   <el-form-item label="姓名"> <el-input v-model="formData.name"></el-input> </el-form-item>
   <el-form-item label="性別"> <el-input v-model="formData.age"></el-input> </el-form-item>
</el-form>

當我們在編輯的時候會從後臺返回數據回填formData（有id），

當我們使用 this.$refs[‘form’].resetFields();重置表單的時候，不能把id重置成null（因為表單html中沒有引用id項，所以重置的時候不能把formData.id重置），如果要把id重置成null，這個時候就要手動重置formData.id

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：