新建、编辑共用一个对话框时表单项验证清空

一、使用场景：

新建和编辑因为表单内容通常相同，每每能够用同一个对话框，可是这样在有表单验证的需求下，同时会引起一个问题：触发了表单验证，再点击【新建】或者【编辑】的时候，表单验证没法清空。针对这种使用场景，本文提出了3种方法，首先做以下定义：

对话框groupDialog

表单为groupForm

二、方法实现

对话框代码：

<el-dialog :visible.sync="groupDialog" width="420px">
    <span slot="title" class="title">{{diaType}}分组</span>
    <el-form
      :model="groupForm"
      ref="groupForm"
      :rules="rules"
      class="group-form"
      label-width="100px"
      size="mini">
      <el-form-item label="名称：" prop="name">
        <el-input
          class="input-width"
          placeholder="请输入"
          v-model="groupForm.name">
        </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submitRangeForm('groupForm')">确 定</el-button>
    </div>
</el-dialog>
复制代码

方法一：setTimeout

/**
 * 对话框 新建、编辑
 */
showDialog(rowData, from) {
  this.groupDialog = true;
  this.$refs['groupForm'].clearValidate();
}
复制代码

会有报错提示TypeError: Cannot read property 'clearValidate' of undefined

这是由于执行到这条语句的时候，表单尚未初始化完成。因此咱们想到了setTimeout，

若是不加第二个参数，默认延迟时间为0，即表示当即执行，但这不影响它仍然是一个异步函数。

/**
 * 对话框 新建、编辑
 */
showDialog(rowData, from) {
  this.groupDialog = true;
  setTimeout(() => {
    this.$refs['groupForm'].clearValidate();
  });
}
复制代码

方法二：nextTick

可是setTimeout是一个异步方法，vue提供了nextTick方法用于在dom加载完成之后，进行一些赋值操做

/**
 * 对话框 新建、编辑
 */
showDialog(rowData, from) {
  this.groupDialog = true;
  this.$nextTick(() => {
    this.$refs['groupForm'].clearValidate();
  });
}
复制代码

前两种都是在打开对话框之后，去清空表单验证 方法三是在对话框关闭以前，去清空表单验证

方法三：before-close

这种方法中因为对话框以及表单已经所有初始化完成，因此不会存在上述因为表单没有加载彻底而引发的【方法未定义】的报错 对于模态对话框来讲，一共有3处可使对话框关闭。

一、点击关闭按钮

二、点击遮罩层外部任意位置

三、点击【取消】按钮。

四、点击【肯定】按钮，请求成功。

在这4个位置都去调用同一个语句：

this.$refs['groupForm'].clearValidate();
复制代码

因此能够将其封装成一个公用的方法，每次须要的时候都去调用它。

一、2可使用before-close：

before-close 仅当用户经过点击关闭图标或遮罩关闭 Dialog 时起效
复制代码

对话框代码作相应调整

<el-dialog :visible.sync="groupDialog" width="420px" :before-close="handleClose">
    <span slot="title" class="title">{{diaType}}分组</span>
    <el-form
      :model="groupForm"
      ref="groupForm"
      :rules="rules"
      class="group-form"
      label-width="100px"
      size="mini">
      <el-form-item label="名称：" prop="name">
        <el-input
          class="input-width"
          placeholder="请输入"
          v-model="groupForm.name">
        </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submitRangeForm('groupForm')">确 定</el-button>
    </div>
</el-dialog>
复制代码

定义一个新方法
 handleClose() {
    this.$refs['groupForm'].clearValidate();
}
复制代码

三、总结

第一种方法，用到了setTimeout，异步方法通常不推荐。

第三种方法，关闭对话框的场景较多，须要在每处都要调用到，比较繁琐。

最好的方法，应该属于第二种，只需在打开对话框的时候清空表单验证便可。