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() 重置表单无效问题相关推荐

html把保留图片改为提交按钮,如何制作图片按钮，并为图片按钮添加提交表单和重置表单功能...
网页中有表单,表单的默认按钮样式不是很好看,很多人为了美观使用图片做按钮. 今天中国在一.图片按钮的制作方法 1. 定义图像形式的提交按钮. 2.用CSS把图片设为按钮的背景 3.作用,设置其bac ...
element ui form循环嵌套表单及嵌套表单的验证方法（校验）
首先看看成果表单一级.二级嵌套的增加.删除一级.二级嵌套的表单的验证知识点一级嵌套循环:<div v-for="(item, index) in form.product ...
Vue+Element UI 下，如何给一个表单设置自定义规则或多个验证规则（：rules）
依旧是公司里那个Vue+Element UI的项目.今天遇到了一个新的问题:表单中某个选择器的值不同,控制着下面表单内容是否显示. 大概就是这个样子.由后台返回的"发放方式"的数值 ...
element ui table实现考勤排班表
1.项目需求 1.1需求制作如下的考勤排班表,可以显示每个岗位每一天的考勤排班情况,并且可以下拉选择人员排班人员更改. 1.2 难点分析在表格中嵌入下拉选择功能. 需要动态显示每个月的排班情况,因 ...
Vue Element UI 基础多条件查询+重置
首先我们用Element UI的话就得下载和引入相对应的东西,下面是网址 https://element.eleme.io/#/zh-CN/component/installationhttps:/ ...
element ui Form 自定义校验规则,验证手机号
网站快速成型工具 Element,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库指南了解设计指南,帮助产品设计人员搭建逻辑清晰.结构合理且高效易用的产品. 查看详情组件 ...
Element Ui 关闭对话框清空验证消息，清除form表单的操作
方法1 首先在对话框取消按钮添加 click事件,例如:(ps:callOf 里面的addGroupData和ref - - ) <div slot="footer" c ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
Element Ui使用技巧——Form表单的校验规则rules详细说明；element的 form 表单rules详细用法
本文章是在项目开发时遇到问题看到的一片好文, 摘录自[博客园]–[逍遥云天]. 感谢作者地址 – https://www.cnblogs.com/xyyt/p/13366812.html 在 [逍遥 ...

Element-UI Form表单 resetFields() 重置表单无效问题

描述：

解决：

总结：

Element-UI Form表单 resetFields() 重置表单无效问题相关推荐

最新文章

热门文章