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

1、使用场景：

新建和编辑由于表单内容一般相同，往往可以用同一个对话框，但是这样在有表单验证的需求下，同时会引发一个问题：触发了表单验证，再点击【新建】或者【编辑】的时候，表单验证无法清空。针对这种使用场景，本文提出了3种方法，首先作如下定义：

对话框groupDialog

表单为groupForm

2、方法实现

对话框代码：

<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处可以使对话框关闭。

1、点击关闭按钮

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

3、点击【取消】按钮。

4、点击【确定】按钮，请求成功。

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

this.$refs['groupForm'].clearValidate();

所以可以将其封装成一个公用的方法，每次需要的时候都去调用它。

1、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();
}

3、总结

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

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

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