Element-UI Form表單 resetFields() 重置表單無效問題


描述:

最近在使用Element-UI 的 Form 組件時,遇到了給清空按鈕設置了resetFields(),點擊卻無法生效的問題

解決:

表單項 el-form-item 的 prop 屬性值應該與表單項內部控件的 v-model 保持一致

 <el-form-item label="備注" prop="remarks">
          <el-input v-model="selectForm.remarks" />
 </el-form-item>

總結:

重置無效的幾種情況: 首先是官網的相關介紹:

方法名 說明
resetField 對該表單項進行重置,將其值重置為初始值並移除校驗
clearValidate 移除該表單項的校驗結果

1、使用 resetField() 之前 el-form 一定要加 ref 屬性
2、表單項 el-form-item 沒有添加 prop 屬性,同時 prop 屬性值需與表單項的 v-model 保持一致
3、resetFields() 是將表單項重置為初始值,而這個初始值是在 Vue mounted 時賦值上去的,如果在這之前對表單進行了賦值,則初始值會改變(例如 created 時),那么后面調用 resetFields() 則不會生效(不會是定義時的空值)。
解決方法:將賦值操作定義在 this.$nextTick() 中(保證了初始值不被修改)

本文轉載自:https://blog.csdn.net/weixin_44002092/article/details/109896767


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM