素材巴巴 > 程序开发 >

elementUI的表单resetFields()方法无法清空

程序开发 2023-09-20 16:53:03

首先需要注意几个问题:

1.我们需要为每个form-item加上prop属性,要不然无法清空(大部分的问题就是出在这)
2.resetFields()方法是重置表单,重置为初始值,而不是设置为空值
3.在resetFields()方法之前,如果修改了data里的表单默认值,那么重置以后就是你修改以后的值,而不是data里的值了

问题
1、页面有个新增和编辑共用的弹出框,在页面初始化后先点新增,后编辑,正常。
2、先编辑,后新增使用resetFields()表单数据竟然没有清空。

原因
1、当我们先新增再编辑,初始值是空的,调用resetFields()方法自然正常。
2、当我们先编辑再新增,会对表单赋值,初始值就是我们赋的值,调用resetFields()方法,表单里还有之前赋的值,并不是我们希望得到的清空表单。

解决

在编辑时,弹出框我们先让他初始化结束再赋值,使用$nextTick再执行赋值。

edit(row) {this.visible = true;this.$nextTick(()=>{//赋值this.editForm = {...row};})
 }
 

在这里插入图片描述


标签:

上一篇: 品优购(angular前端分页) 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。