dialog配合表单采坑-无法获取表单的ref

开发背景

点击新增用户按钮，弹出由el-form表单组成的dialog，表单存在判空规则,  提交时表单项不合格, 会提示相应的规则错误，如图一所示，关闭按钮再点击按钮，发现错误提示不会消失。

                                                                                图一  表单提交提示错误

 

 

解决办法

出现这个问题我们理所应当想到在点击按钮事件中使用this.$refs["formName"].resetFields()【formName是给el-table ref名称】进行清除表单错误，此时会报错， 因为此时表单在dialog中还未刷新出来, this.$refs['accountForm']为undefined；所以我们需要转换一下思路，在dialog关闭的时候调用this.$refs['accountForm'].resetFields()重置表单错误提示信息即可。

resetFields方法介绍如图二。

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

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