Element-UI Form表单 resetFields() 重置表单无效问题
生活随笔
收集整理的這篇文章主要介紹了
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
總結
以上是生活随笔為你收集整理的Element-UI Form表单 resetFields() 重置表单无效问题的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: linux下无root权限使用yum安装
- 下一篇: LeetCode 88. 合并两个有序数