element dialog 关闭 form 表单校验未清除的解决办法

涵信

已于 2023-03-30 16:04:29 修改

阅读量1w

点赞数 6

于 2020-06-27 18:09:54 首次发布

本文链接：https://blog.csdn.net/qq_40860137/article/details/106985375

版权

dialog 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

form

1 篇文章 0 订阅

订阅专栏

elementUI

1 篇文章 0 订阅

订阅专栏

一、需求背景

点击表单提交按钮之后，在 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种对于该方法的介绍：