element-ui表单先编辑后新增resetFields()无效的坑

现象
 页面有个新增和编辑共用的弹出框,在页面初始化后先点新增,后编辑,正常。
 先编辑,后新增使用resetFields表单数据竟然没有清空。
原因
在没有点新增或着编辑时,我的el-dialog弹出框里的内容是空白的,只有header和footer,
并没有body,只有el-dialog弹出时才会加载内容。

代码
接着我们看element-ui的文档
在这里插入图片描述
resetFields该方法是把表单的数据重置为初始值。并不是清空,因此可以想到:
当我们先新增在编辑,初始值是空的,调用resetFields()方法自然正常。
当我们先编辑在新增,会对表单赋值,初始值就是我们赋的值,调用resetFields()方法,表单里还有之前赋的值,并不是我们希望得到的清空表单。

解决

在编辑时,弹出框我们先让他初始化结束再赋值。

 edit(row) {
                this.visible = true;
                this.$nextTick(()=> {
                  // 赋值
                })
            },
  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值