el-dialog 用 v-if 重置表单

`el-dialog` 是 Element UI 中的一个轻量级对话框组件，在 Vue.js 环境下使用。如果你想要在 `el-dialog` 显示时重置表单数据，可以结合 `v-if` 条件指令来控制表单的状态。

首先，你需要确保有一个 `el-form` 组件，它包含需要重置的数据。然后，在你的 `el-dialog` 上设置一个 `v-if`，比如当 `dialogVisible` 变为 `true` 时，显示对话框并重置表单：

<template>
  <div>
    <button @click="openDialog">打开对话框</button>

    <el-dialog :visible.sync="dialogVisible" width="40%"
               :title="dialogTitle"
               v-if="dialogVisible">
      <el-form ref="form" :model="formData">
        <!-- 表单元素 -->
      </el-form>
      <span slot="footer">
        <el-button @click="handleClose">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      dialogTitle: '表单',
      formData: {}, // 初始化表单数据
    };
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
      // 在这里重置表单数据
      this.$refs.form.resetFields();
    },
    handleClose() {
      this.dialogVisible = false; // 关闭对话框
    },
  },
};
</script>

在这个例子中，当点击按钮时，`openDialog` 方法会被触发，`dialogVisible` 设为 `true`，同时通过 `$refs.form` 调用 `resetFields()` 方法来重置表单数据。