【积累】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方法未能达到想要的结果

你可能感兴趣的:(积累)