【积累】Element-ui,el-dialog里面嵌入el-form,resetFields失效问题

记一次element-ui,el-dialog里面嵌入el-form,使用resetFields方法初始化表单失效,问题记录:

前提:

当el-form在一个el-dialog中,dialog显示与否绑定变量 showDialog,ref 为 editForm_ref ,e-lform的model绑定了一个对象editForm,初始值为:

	editForm:{
	    unitName:'',// 单位名称
	    parentUnitName:'',// 父级单位名称
	    unitLevel:'',// 科目级别
	},
操作步骤:
  1. 点击页面按钮,给form 的 model 赋值:

    	// 对 editForm 赋值
        this.editForm = {
        	unitName:'单位名称',// 单位名称
    	    parentUnitName:'父级单位名称',// 父级单位名称
    	    unitLevel:'科目级别',// 科目级别
        };
    	// 使dialog显示出来
    	this.showDialog = true;
    
  2. 此时点击按钮,调用方法:

    	this.$refs.editForm_ref && this.$refs.editForm_ref.resetFields();
    	
    	// (tips:需求为 -> 重置成vue.data里的初始值)
    
出现的问题:

按照原有想法,应该是想让嵌套在dialog里面的form进行初始化,数据应该如下:

	editForm:{
      unitName:'',// 单位名称
      parentUnitName:'',// 父级单位名称
      unitLevel:'',// 科目级别
	},

但是,debugger发现,resetFields方法里面,每一列的fileld的初始值为 步骤1赋值之后的值,即from的初始值发生了变化~~

解决方法:
	// 上述步骤1改为:
	
	// 使dialog显示出来
	this.showDialog = true;
	// 对 editForm 赋值
    this.$next(_ => {
		this.editForm = {
	    	unitName:'单位名称',// 单位名称
		    parentUnitName:'父级单位名称',// 父级单位名称
		    unitLevel:'科目级别',// 科目级别
	    };
	});
猜想:

form如果嵌入dialog中,form的初始化,是dialog第一次显示的时候,form model的初始值,并且form初始化会有一定时间延迟。

结果:

页面检查元素,发现,el-dialog的body元素,的确是在第一次显示之后,才会渲染,也就意味着内嵌的el-form在这时才会真正渲染,步骤1,在el-form渲染之前,改变了绑定的model值,所以el-form的model初始值,与vue.data里的初始值,是不一样的,导致resetFields方法未能达到想要的结果

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值