vue项目 关闭编辑打开新增弹窗中的表单验证清除问题

如果新增和编辑是同一个组件，那么在关闭编辑弹窗并打开新增弹窗时，需要对表单的数据进行重置，同时还需要清除表单验证错误信息。可以按照以下步骤来实现：

1.在表单组件中，定义一个名为resetForm的方法，用于重置表单的数据和验证信息：

methods: {
  resetForm() {
    this.$refs.form.resetFields();
    this.$refs.form.clearValidate();
  }
}

2.在父组件中，定义一个名为handleClose的方法，用于关闭编辑弹窗并打开新增弹窗，同时调用表单组件的resetForm方法：

methods: {
  handleClose() {
    this.editVisible = false;
    this.resetForm();
  },
  resetForm() {
    this.$refs.form.resetForm();
  }
}

3.在编辑弹窗和新增弹窗的模板中，分别绑定关闭按钮的点击事件，调用父组件的handleClose方法：

<!-- 编辑弹窗模板 -->
<template>
  <el-dialog :visible.sync="editVisible" title="编辑" @close="handleClose">
    <!-- 省略表单内容 -->
  </el-dialog>
</template>

<!-- 新增弹窗模板 -->
<template>
  <el-dialog :visible.sync="addVisible" title="新增" @close="handleClose">
    <!-- 省略表单内容 -->
  </el-dialog>
</template>

这样，当关闭编辑弹窗并打开新增弹窗时，表单的数据和验证信息就会被重置，从而避免了上述问题。