elementui-清除弹框中表单的默认值-resetFields()

当弹框(dialog)中含有表单,要进行编辑、查看、新增操作,需要复用弹框,会涉及到清空表单数据。

elementui官网中dialog部分有这么一句话:
Dialog 的内容是懒渲染的,即在第一次被打开之前,传入的默认 slot 不会被渲染到 DOM 上。因此,如果需要执行 DOM 操作,或通过 ref 获取相应组件,请在 open 事件回调中进行。

这里会遇到一个问题,先进行编辑再新增,使用this.$refs[formName].resetFields();没有效果。
原因大概是因为,resetFields()方法只是将表单赋为初始值,表单的初始值是在mounted中赋给dom,也就是第一次渲染的时候。因此如果第一次是编辑,我将回显的信息赋值给表单,它就会认为这是初始值,所以不论怎么调用都会有种reset无效的感觉。

解决办法:在dialog的open中清空表单。 ps: 请注意this.$nextTick

//-------------------html

	  
	  //...
	  


//------------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-------

你可能感兴趣的:(elementui,前端)