Vue、element-ui的resetFields()方法重置表单无效问题及解决办法

问题：
使用this.$ref[‘form‘] .resetFields()无法重置表单项

原因：
1.没有给表单添加ref属性

<el-form ref="form"></el-form>

2.表单项el-form-item没有添加prop属性，prop属性需要与input框绑定的属性一致

<el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
<el-form-item label="活动名称" prop="name">
<el-input v-model="sizeForm.name"></el-input>
</el-form-item>
</el-form>

3.还有一个经常出现这种问题的场景是，当使用vuex的时候，新建表单与编辑表单复用，此时上述属性跟方法都添加了也无法达到清除表单的效果。

此时我们再重新看一下element-ui的官方文档

重点：resetField()方法不是将表单重置为空，而是重置为初始值

所以当我们打开新建表单的时候，表单项绑定的属性值为空，在提交表单后，表单项绑定的值不为空，此时再打开新建表单是会有上一次的值出现，此时resetField()方法是无法清空表单的，因为在这次操作的时候，属性初始值就不为空。

解决方法：
在提交表单成功后对绑定的值进行方法重置

// 重置表单项属性
resetForm () {return {remark: ‘‘,name: ‘‘}
}// 提交表单成功后重新给属性赋值
submit () {//......调用成功let self = thislet query = self.resetForm()self.updateForm({ //此方法是自定义的vuex的action方法，大家可根据实际应用场景定义重置表单方法form: query)}self.$ref[‘form‘].resetFields() // 此时再调用resetFields()方法是为了清除表单验证而出现的错误
}

在对属性进行重置后执行resetFields方法，是因为对属性重置为空时，可能会触发表单规则的验证，此时执行resetFields会移除校验结果

Vue、element-ui的resetFields()方法重置表单无效问题及解决办法相关推荐

element中form表单resetFields()方法重置表单无效
官方文档 // 调用resetFields但没有生效 resetForm() {this.$refs['form'].resetFields(); } 解决: form里需要ref 表单项el-for ...
resetFields方法重置表单
<!--* @Descripttion: resetFields方法重置表单* @version: * @Author: zhangfan* @email: 2207044692@qq.com* ...
vue + element-ui 对登录功能、重置表单、退出功能、路由重定向、挂载路由导航守卫的实现
vue + element-ui 对登录功能.重置表单.退出功能.路由重定向.挂载路由导航守卫的实现表单验证规则: 重置表单和对登录功能的验证: 路由重定向: 挂载路由导航守卫: 退出功能的实现 ...
java订单重复提交_java表单重复提交常用解决办法
最近在看些基础的东西,顺便做下笔记.相信大家在平时网页使用中,经常会有按钮重复点击,然后点不动刷新,还有当网络延时比较厉害点了没反应在点击的重复提交.为了避免这种情况,总结了一下4点处理方案表单重复 ...
vue2/vue3 element 重置表单无效 resetFields()
resetFields这个方法是将表单重置为初始值, 也就是说,是将表单中的数据重置为dom节点渲染时的值,而不是重置为空对象. 也就是说,当你的表单数据,是在dom节点渲染前被赋值的,那么他的初始值 ...
Element-UI Form表单 resetFields() 重置表单无效问题
描述: 最近在使用Element-UI 的 Form 组件时,遇到了给清空按钮设置了resetFields(),点击却无法生效的问题解决: 表单项 el-form-item 的 prop 属性值应该 ...
element ui 红点_element-ui 自定义表单验证 , 但是不出现小红心了
基本上按照文档上提供的方式做就没啥大问题 , 我遇到的问题是 , 自定义以后不显示小红星了提交重置 export default { data() { var checkAge = (rule, ...
前端学习（3004）：vue+element今日头条管理--使用form表单
element ui 弹出组件的遮罩层以及多层遮罩解决办法
做项目中遇到几次弹出框遮罩层的问题.有嵌套的弹出框.还有单页面中tabs标签页的弹出框.今天就说一下tabs中的弹出框遮罩层的问题. 这个页面有五个tabs页签,每一个都有弹出框组件,也就是说每一个 ...

Vue、element-ui的resetFields()方法重置表单无效问题及解决办法

Vue、element-ui的resetFields()方法重置表单无效问题及解决办法相关推荐

最新文章

热门文章