一、需求背景

点击表单提交按钮之后，在 form 表单中有 prop 属性的 el-input 元素会参与字段的校验（有校验不为空的、长度不符合的、手机号格式等等），会出现如下图所示情况，当我们关闭dialog再打开时，发现校验的错误信息还保存在表格中，我们应该如何解决呢？

二、解决办法

思路分析：

出现这个问题之后，我们第一时间会在弹窗出现时使用  this.$refs["formName"].resetFields()【formName是给el-table ref名称】进行清除表单错误，但是此时会报错， 因为当前表单元素在dialog中还未刷新出来, this.$refs['accountForm'] 为 undefined

解决：

   1、使用 this.$nextTick(() => { ... })

// $nextTick 中注册的回调可以拿到 dom 元素
this.$nextTick(() => {
    this.$refs['accountForm'].resetFields()
})

我们会发现不起作用，还会报错，原因是因为刚打开dialog时，表单组件还未加载完成。

    2、第二种方法是在给dialog注册一个关闭事件，在dialog关闭的时候清除表单校验规则。

  <el-dialog
      :title="title"
      :visible.sync="accountFlag"
      align="center"
      width="40%"
      @close="$refs['accountForm'].resetFields()"
    >
</el-dialog>

备注：以下是ElementUI种对于该方法的介绍：

                                                                           图二 使用resetFields进行清除表单错误