element-ui 表单重置 resetFields 方法不起作用的解决方法

问题描述:
经常有新增和编辑需要复用同一个弹窗的情况;刷新一下页面,先点开编辑关闭弹窗后再点击新增,这个时候再弹窗关闭的时候重置表单方法没有效果:

this.$refs.form.resetFields();

resetFields作用:

1、对整个表单进行重置,字段重置为初始值
2、移除校验结果

问题分析结果:

1、resetFields 重置的是初始值
2、form 的初始值在 mounted 生命周期执行的时候被调用
3、如果在 mounted 生命周期执行之前修改了初始值,那么resetFields 方法会把修改后的值作为初始值

解决方案:
将回显数据放到 setTimeout 或者 nextTick 里面

this.$nextTick(()=>{
	//这里赋值回显数据
})
//或者
setTimeout(()=>{
	//这里赋值回显数据
}.bind(this),0)

注意: 如果上面还是没有解决问题,建议检查一下你的 el-form-item 元素上是不是添加了 prop 属性。

  • 4
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值