element 表单restFields不生效的问题

最新推荐文章于 2024-09-07 14:58:04 发布

一只可爱梅花鹿

最新推荐文章于 2024-09-07 14:58:04 发布

阅读量2.9k

点赞数 1

文章标签：前端 vue elementui

本文链接：https://blog.csdn.net/qq_51868859/article/details/125808366

版权

在前端Vue项目中，使用Element UI时遇到表单resetFields方法不生效的问题。该问题源于表单的初始值在mounted生命周期之前已被赋值。解决方案是确保在表单mounted后进行赋值操作，例如在点击编辑时使用this.$nextTick方法。这确保了表单的初始值始终是最新的，从而重置成功。

摘要由CSDN通过智能技术生成

问题源代码

    edit(row) {
   
      console.log(row);
      this.state = false
      this.form = {
   ...row}
      this

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一只可爱梅花鹿

关注关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

element-ui表单校验不生效问题总结

TTST_HTSN的博客

09-02

3079

在使用element这个UI框架的时候，表单校验有时候不生效，头大！！！可能存在问题 1.prop命名和form中对应的v-model名字不一样当v-model使用的名字和prop使用的名字不一样时就会出现无法验证的问题。 2.添加了rules但是没有prop 这个是最致命的，也是最不容易注意的在这种情况下，当你失去焦点以后不会触发验证规则。当你加上prop以后这个问题就迎刃而解。表单验证时机不对当你回填的时候，明明没有触发验证，但是验证却实际的触发了，原因是： 1.返回值没有该input框

关于element表单重置resetFields()不生效问题

Stead_Fast的博客

09-09

4400

问题描述使用element对话框Dialog，添加编辑使用一个弹出框时，发现使用表单重置方法resetFields()不生效，也就是点击编辑之后关闭弹框，再点击添加，此时弹出框表单仍然保留编辑项的内容而不是全新的空表单。弹框的@close='resetForm'关闭事件绑定了重置表单以及表单验证的方法 resetForm(){ //重置表单 this.$refs.form.resetFields(); //重置表单验证 this.$refs.form.cl

参与评论您还未登录，请先登录后发表或查看评论

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

10-14

主要介绍了快速解决Vue、element-ui的resetFields()方法重置表单无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue项目表单中使用resetFields()报错或未生效

蚂蚁搬砖我砌墙

10-07

8508

使用resetFields()报错或未生效的解决方案

Form 表单的 resetFields() 失效原因

最新发布

weixin_52648900的博客

09-07

624

排查 Form 表单的 resetFields() 失效原因的几种方法和思路

resetFields()不生效

apanpan8126的博客

04-02

1656

没有prop属性

el-form的重置表单（resetFields()）不生效的其他原因

qq_40417349的博客

03-04

972

经过反复测试，还有一种情况也会导致resetFields失效，如下代码中，在el-form与el-col标签之间还添加了一个template标签，原本用于数据加载时不显示表单内容，但是，经过反复测试发现，它在这个位置会导致resetFields重置表单数据操作失效，具体原因还不清楚；将其删除之后，resetFields操作生效。近日我也遇到了el-form的重置表单（resetFields()）方法不生效的问题，网上查找了很多解答，反复检查我的写法实际上都是符合使用规则的，但是还是不生效，好生奇怪。

resetFields 不生效

m0_49494051的博客

01-22

947

el-form要设置ref属性，且ref的值与this.$refs[form].resetFields()中的form一致 el-form-item要设置prop属性，表单rule验证和resetFields()清除的都是prop绑定的字段还有就是！！！注意大小写问题！:model=“ruleForm” 和 ref=“ruleForm” 大小写必须一致！ <el-form ref="userForm" :rules="userRules" :model="userForm" label-wid

修改element组件样式不生效问题

h5240l的博客

03-31

2748

原因：style添加了scoped 解决1：去除scoped，但是对类名约束性更强了，可以给组件再添加一个类，以限制style在其他组件中生效 2：更改主题 3.添加/deep/ 或::v-deep /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active { background-color: #ff6600; } ::v-deep .el-paginat

elementui 表单 resetFields 方法不生效问题解决

jiangjunyuan168的博客

01-23

1133

调用 elementui 官方提供的表单重置方法 resetFields 方法重置表单不生效，相信很多小伙伴都遇到过这个...

解决Vue中Element resetFields()重置表单不生效的问题（含Cannot read property ‘resetFields‘ of undefined问题解决）

热门推荐

unlilalila的博客

11-25

2万+

解决Vue中Element resetFields()重置表单不生效的问题，解决Cannot read property ‘resetFields‘ of undefined问题

element el-table resetfields() 不生效

飞翔的熊blabla

09-20

1900

博客园首页新随笔联系订阅管理 element el-table resetfields() 不生效 问题场景表单中的重置按钮，调用了resetfields() 方法，不生效 问题原因结合文档对照后，发现是没有为el-form-item设置prop字段总结想让resetfields()生效有2个前提： form要设置ref，且ref值要与 this.$refs[formName].resetFields()中的foemName一致 el-form-item上设置

resetFields重置初始值不生效的原因

marsmoon的博客

12-30

8172

resetFields重置初始值不生效

resetFields()不生效的原因

Hiroshi's

02-24

6591

编辑用户新增用户点击编辑的时候，数据回显，没问题：点击取消，会调用方法按理说应该会把表单清空。但是我们再点击新增的时候，数据并没有被清空：原因：点击编辑的时候，一旦执行showModal.value = true，就显示dialog，然后立马就执行Object.assign(userForm, row) 此时数据修改了，但是dialog里面的el-form还没有mounted，也就是说，数据是在form表单mounted之前修改的，那么这个修改后的数据就成为了form表单的初始值。

element-ui的resetFields()方法不生效的原因及解决方法

baidu_23275675的博客

05-18

2万+

问题描述：先调用编辑回显再调用新增 this.$ref['form'] .resetFields()无法重置表单项原因：调用编辑的时候，表单的初始值被设置为回显的值，每次重置时只是重置为初始值，不是空值。 element-ui的官方文档：当我们第一次打开Dialog，紧接着设置回显，因为Dialog还没执行完毕，这时form的初始值会被设置为回显的值，所以在调用this.$ref['form'] .resetFields()时form看起来没有重置。解决：在设置回显值的时候，不

vue3+element-plus表单重置resetFields方法不生效踩坑

YSQ_qsy的博客

08-05

1万+

vue3+element-plus表单重置resetFields方法有时不生效

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

JEECG官方博客

03-15

2652

问题：使用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 lab

element 表单重置 resetFields 无效

qq_22048949的博客

11-21

882

官网说明， resetFields 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 1.resetFields 是用于重置表单数据为初始化，不是进行清空处理 2.异常--新增未在el-form标签指定ref 未在el-form-item标签指定prop 正确用法 <el-form :model="numberValidate...

element中表单验证不生效

10-09

在Element中，表单验证通常需要使用表单验证规则（rules）来指定验证条件。如果表单验证不生效，可能有以下几个原因： 1. 表单项没有设置正确的验证规则。请确保在表单项上设置了正确的验证规则。验证规则可以使用自定义的函数或预定义的验证规则。 2. 表单没有正确引入Validator组件。Validator组件是用于处理表单验证的核心组件，它负责执行验证规则并显示错误消息。请确保在表单中正确引入了Validator组件。 3. 表单项没有绑定v-model指令。v-model指令用于双向绑定表单项的值和表单数据。请确保表单项正确使用了v-model指令来绑定数据。 4. 表单项的值没有被更新。在进行表单验证时，需要确保表单项的值被正确更新。如果表单项的值没有被更新，可能导致验证不生效。请检查表单项的值是否被正确更新。 5. 其他可能的原因。如果以上步骤都没有解决问题，请检查控制台是否有任何错误消息，并仔细查看代码逻辑是否正确。