记一次element-ui,el-dialog里面嵌入el-form,使用resetFields方法初始化表单失效,问题记录:
前提:
当el-form在一个el-dialog中,dialog显示与否绑定变量 showDialog,ref 为 editForm_ref ,e-lform的model绑定了一个对象editForm,初始值为:
editForm:{
unitName:'',// 单位名称
parentUnitName:'',// 父级单位名称
unitLevel:'',// 科目级别
},
操作步骤:
-
点击页面按钮,给form 的 model 赋值:
// 对 editForm 赋值
this.editForm = {
unitName:'单位名称',// 单位名称
parentUnitName:'父级单位名称',// 父级单位名称
unitLevel:'科目级别',// 科目级别
};
// 使dialog显示出来
this.showDialog = true;
-
此时点击按钮,调用方法:
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方法未能达到想要的结果