当弹框(dialog)中含有表单,要进行编辑、查看、新增操作,需要复用弹框,会涉及到清空表单数据。
elementui官网中dialog部分有这么一句话:
Dialog 的内容是懒渲染的,即在第一次被打开之前,传入的默认 slot 不会被渲染到 DOM 上。因此,如果需要执行 DOM 操作,或通过 ref 获取相应组件,请在 open 事件回调中进行。
这里会遇到一个问题,先进行编辑再新增,使用this.$refs[formName].resetFields();
没有效果。
原因大概是因为,resetFields()方法只是将表单赋为初始值,表单的初始值是在mounted中赋给dom,也就是第一次渲染的时候。因此如果第一次是编辑,我将回显的信息赋值给表单,它就会认为这是初始值,所以不论怎么调用都会有种reset无效的感觉。
解决办法:在dialog的open中清空表单。 ps: 请注意this.$nextTick
//-------------------html
<el-dialog
:title="dialogTitle"
:visible.sync="dialogShow"
@open="openFun">
<el-form
:model="formData"
:rules="$rules.common"
ref="theForm"
label-width="100px">
//...
</el-form>
</el-dialog>
//------------js---methods
openFun(formName,type,data){//弹框回调
this.$nextTick(() => {
if(this.$refs[formName]){
this.$refs[formName].resetFields();
}
switch(type){//1:查看,2:编辑,3:新增
case '1':this.dialogTitle='查看';this.formData= data;break;
case '2':this.dialogTitle='编辑';this.formData= data;break;
case '3':this.dialogTitle='添加';break;
default:break;
}
});
},
//员工添加、编辑、修改 按钮
dialogBtn_em(formName,type,data){
this.dialogShow=true;
//此处最好声明一个新的变量来接收数据去赋值弹框,避免影响源数据
let opt = Object.assign({},data)
this.openFun(formName,type,opt)
},
------end-------