el-form表单重置resetFields不生效

项目场景:

 前段时间遇到一个问题,当页面刷新之后,第一次先选择了一条数据打开了编辑弹窗,再关闭。之后再打开新增弹窗,原本应该是空的el-form表单还是刚刚打开编辑时的数据,而且我每次在关闭弹窗都会使用this.$refs[formName].resetFields()去重置el-form,所以这是什么情况造成的?


问题描述

在多次测试又发现:当第一次点击新增弹窗之后,之后的el-form表单重置都没有问题,只有第一次点击编辑才会有问题。


原因分析:

这是因为,当页面刷新后,我们第一次打开编辑弹窗时,el-dialog是懒加载的,这一行的数据对el-form进行了赋值,之后el-dialog才被渲染完成,里面的el-form才完成初始化,所以这个el-form表单使用this.$refs[formName].resetFields()进行初始化时每次都会生效,只不过初始化的值是第一次的数据。


解决方案:

 那么解决方法是什么?

只需要在el-dialog渲染完成之后,我们再进行赋值即可

this.visible = true 
setTimeout(()=>{
    this.form.name = row.name
    this.form.sex = row.sex
},100)
  • 6
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值