element 模态框内,表单编辑回填的值在关闭时,表单内容无法正确重置问题

element 表单使用 this.$refs[formName].resetFields() 进行数据重置,但重置的初始数据是基于表单第一次渲染时的数据为模板。由于点击编辑时,模态框显示与表单内容渲染是同时进行,所以 el-form 就认为回填值是初始数据,每次重置都以回填值数据来重置表单。

解决思路:将回填值赋予表单对象的操作 放入 $nextTick 中延迟进行,让表单对象将空数据认定为初始数据。

解决方法

									   <在关闭模态框时重置对象id、重置表单校验>
	<el-dialog :visible.sync="visible" @close="form.id=null;$refs.form.resetFields()">

	
	// 点击编辑 row:回填数据
    editFT(row) {
    
    	// 先显示模态框
      	this.visible = true;
      	
      	// 将回填值赋值操作 延迟到下次 DOM 更新循环之后 (模态框显示并渲染 form 后) 执行
      	this.$nextTick(() => {
        	this.form = JSON.parse(JSON.stringify(row));
      	});
      	
    },	

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值