Element Ui - 编辑时表单校验信息未清空问题处理

Element Ui 关闭对话框清空验证消息，清除form表单的操作

1. 首先在对话框 取消按钮 添加 click事件，例如：（ps：callOf 里面的addGroupData和ref - - ）

<div slot="footer" class="dialog-footer">
   <el-button @click="callOf('addGroup')">取消</el-button>
</div>

2. 点击取消按钮，关闭对话框，清除表单验证

callOf(formName){
  this.creatGroup = false;
  this.$refs[formName].resetFields();
}

3. 对话框右上角的close按钮

before-close：关闭前的回调，会暂停Dialog的关闭，function(done)，done用于关闭Dialog。location.reload：刷新整个页面

closeDialog(done){
  done();
  location.reload();
}

方法2

增加 ref 属性

<el-form ref="formData"></el-form>
// Element UI 自带清除表单方法
this.$refs[formName].resetFields(); // 重置表单移除校验
this.$refs[formName].clearValidate(); // 仅清除验证

Vue表单报错 Error in event handler for “click” : "TypeError:Cannot read property ‘resetFields’ of undefined"

报错原因 mouted加载数据以后，隐藏的弹出框并没有编译渲染进 DOM 里面。所以 click 弹出的时候 $refs 并没有获取到 DOM元素导致 ‘resetFields of undefined’

解决办法: 可以用 this.nextTick() ，将回调延迟到下次DOM更新循环之后执行this.refs[formName].resetFields() / clearValidate():清空验证

this.$nextTick(()=>{
  this.$refs.addForm.resetFields();
  // or 
  this.$refs.addForm.clearValidate();  
})