el-dialog关闭时清空表单

### 解决 `el-dialog` 关闭时清空表单数据的方法

#### 使用 `$refs.form.resetFields()` 方法重置表单
当使用 Element UI 的 `el-dialog` 组件并希望在关闭对话框时清空其中的表单内容，可以在 Vue 实例的 methods 中定义一个方法来处理这一逻辑。通过调用 `this.$refs.form.resetFields()` 可以有效地清除表单项的内容以及验证状态[^2]。

methods: {
  closeForm() {
    this.$refs.form.resetFields(); // 清除数据
    this.dialogFormVisible = false; // 关闭对话框
  }
}

#### 销毁子组件防止缓存问题
对于更复杂的情况，比如表单内含有 `select` 类型的选择器，并且这些选择器会在改变选项时触发校验事件，则简单的重置可能无法满足需求。此时可以考虑采用 v-if 来控制包裹着整个表单的一个 div 或其他容器标签的存在与否。这样做不仅能够达到销毁再创建的效果从而彻底移除之前的输入痕迹，还可以避免不必要的自动校验提示出现[^3]。

<div v-if="dialogFormVisible">
  <!-- 表单内容 -->
</div>

#### 完整实例展示
下面是一个完整的例子展示了如何实现上述功能：

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

  <el-dialog :visible.sync="dialogFormVisible" title="添加新条目" width="30%" @close="handleClose">
    <el-form ref="addItemForm" :model="itemData">
      <el-form-item label="名称：" prop="name">
        <el-input v-model="itemData.name"></el-input>
      </el-form-item>
      
      <!-- 更多表单项... -->

    </el-form>
    
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm('addItemForm')">提交</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      dialogFormVisible: false,
      itemData: {}
    };
  },
  
  methods: {
    openDialog() {
      this.dialogFormVisible = true;
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
          this.closeForm();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
          this.$nextTick(() => {
            this.$refs.addItemForm.resetFields(); // 清除数据
          })
        })
        .catch(_ => {});
        
      this.dialogFormVisible = false; // 关闭对话框
    }
  }
};
</script>