关闭el-dialog清空表单

在使用 Element UI 的 el-dialog 组件时，可以通过以下步骤来关闭 el-dialog 并清空表单：

1. 在 Vue 组件中，首先定义一个 data 属性来存储表单的初始值。例如，可以在 data 属性中声明一个名为 formData 的对象，用于存储表单字段的初始值。

data() {
  return {
    formData: {
      name: '',
      email: '',
      // 其他表单字段
    },
    dialogVisible: false, // 控制 el-dialog 显示/隐藏的变量
  }
}

2. 在关闭 el-dialog 的方法中，将表单数据重置为初始值。可以创建一个名为 `resetForm` 的方法，将初始值赋给 `formData` 对象。

methods: {
  resetForm() {
    this.formData = {
      name: '',
      email: '',
      // 其他表单字段
    }
  },
  closeDialog() {
    this.dialogVisible = false; // 关闭 el-dialog
    this.resetForm(); // 在关闭 el-dialog 时重置表单
  }
}

3. 在 el-dialog 组件中，绑定 `visible` 属性到 `dialogVisible` 变量，并监听 `before-close` 事件，在关闭之前执行清空表单的操作。

<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" @before-close="resetForm">
      <!-- 弹窗内容和表单 -->
    </el-dialog>
  </div>
</template>

通过以上步骤，当你关闭 el-dialog 时，表单字段将会被重置为初始值，以便下次打开 el-dialog 时，表单是空的。