elementUi Form表单resetFields详解

前言 在一次结合v-if/v-else与resetFields结合使用reset之后值不正常，看完源码提了issue，然后被告知答案原来就在vue文档里，打脸打脸，因此记录一次不看文档，并且出问题不第一时间找文档的教训。 结论 凡事先从文档下手，用element-ui不是光看element-ui的文档，还要看vue文档 Form组件r...

描述： 最近在使用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> 总结

本文分享了在使用Element-UI表单组件时遇到的三个常见问题：1) 表单ref重复导致无法获取组件；2) el-form-item的prop与v-model不匹配；3) 表单model字段与rules验证规则字段不一致。通过具体代码示例，作者详细说明了每个问题的表现和解决方法，包括修改ref名称、统一prop与v-model绑定、确保model与rules字段对应等。这些经验对于使用Element-UI开发表单功能具有实用参考价值。

首先，需要对form表单完成如下定义： 然后，对表单的项指定一个prop属性名，并将其绑定到model中： 2.2 用户名检验（一般检验） 通过制定rules规则检验输入数据的合法性： 效果如下：同样，先制定rules规则检验： 然后实现入侵检验方法checkPhone： 2.4 form表单数据非法检验 2.5 完整表单代码 如果本文对您有帮助的话，麻烦充电支持一下小编，谢谢♥~

Element UI 是一款基于 Vue.js 的高效、简洁的前端组件库，专为开发者和设计师提供丰富的 UI 组件。它不仅易于上手，还具备高度的可定制性，能够满足多样化的项目需求。通过使用 Element UI，开发者可以快速构建高质量的现代 Web 应用，实现优雅且一致的用户界面，从而显著提升开发效率和用户体验。本系列文章深入探讨了 Element UI 的各项功能及最佳实践，帮助你在实际项目中更好地应用和优化这一强大的工具。

this.$refs.ruleForm.resetFields() 是将form表单重置到初始值，并不会清空表单。解决办法：添加 this.ruleForm = this.$options.data().ruleForm。

场景 1、用dialog【新增】、【修改】数据 2、先点击了【修改】，弹出弹窗，此时弹窗的form表单已经赋值 3、再点击新增按钮，此时调用resetFields()方法是没有办法使form清空的 原因： resetFields是将form表单重置到初始值，而这个初始值是form表单mounted后的值，也就是点击了【修改】时赋的值。 解决方法： dialog的form表单清空，this.formData = this.$options.data().call(this).formData //弹窗表

需求 点击按钮弹出修改的对话框 出现的bug 在点开一个按钮之后，不做操作，关闭对话框，再点开另一个按钮，发现这一行的数据被改变了 具体如下 造成的原因 原因一：我在给弹出的对话框中赋值时，是浅拷贝，导致对话框中的数据源与table中的数据源是同一个数据源，修改对话框中的数据就是修改table中的数据 原因二：resetFields仅仅是将字段重置为初始值，并不是将数据清除。上图中第一次绑定的数据是1，所以表单的初始数据就是1，在第二次点击又关闭时，会触发resetFields方法，将对话框中的数据重置为

在使用Vue.js结合Element-UI开发表单时，的方法是一个常用的功能，用于重置表单项到初始状态。然而，这个方法在某些情况下可能导致一些不易察觉的问题。本文将分享一个实际遇到的使用陷阱，并提供一个解决方案。假设我们正在开发一个产品管理系统，其中包含“添加产品”和“修改产品”两个功能。我们使用Element-UI的来构建表单，并使用方法来重置表单数据。在实现“添加产品”对话框时，我们遇到了一个问题：当从修改模式切换到添加模式时，即使调用了，表单字段也没有正确重置，导致旧的值依然残留。初次尝试解决问题时，

在实际的项目开发中，表单往往会和对话框结合使用，用户在表单中填写内容校验不通过并且关闭了对话框，用户再次打开对话框，上一次校验不通过的结果将会再次出现在表单中，显然显得不够优雅。

//当弹窗中有表单时,弹窗退出时,需要初始化数据,清除校验结果 this.$refs.addForm.resetFields() //该方法类似于表单的兜底校验,validate的使用 this.$refs.addForm.validate(valid=>{ if(valid){ console.log('所有校验都通过了') }) ...

1.问题概述 在重置表单时，使用this.$refs.form.resetFields()没有效果 2.解决方法 1.检查表单form是否有ref属性 <el-form ref="form"></el-form> 2.检查el-form-item是否有prop属性,属性值需要与绑定的数据一致 <el-form-item prop="name"> <el-input v-model="form.name"></el-input>

其实之前就知道这个坑，网上其他人也说过。 然后我勉强处理了一下。 然后又制造了新的坑。 这里记录一下。 坑的产生 resetForm(formName) { this.$refs[formName].resetFields(); } 坑一：官方写法，api也没有说明。这些坑。 解决方法：多实践，官方写法仅供参考。 坑二：看这个写法知道this.$refs这个是必须d...