Vue3+Element Plus 关于Dialog弹出Form表单，使用resetFields重置无效的解决

在Vue3和Element Plus中，如果你遇到了在Dialog中使用Form组件并尝试通过resetFields方法重置表单但未生效的问题，可能是因为你没有正确地使用Provide/Inject或者Reactivity API（如ref和reactive）来跟踪表单数据的变化。

解决方法：

1. 确保你已经使用ref或reactive来创建响应式的表单数据。
2. 使用<el-form>组件并绑定:model属性到你的响应式数据上。
3. 使用<el-form-item>组件并绑定prop属性到你表单数据的键上。
4. 调用resetFields方法时，确保它是在Dialog显示后调用，并且是Dialog的open事件之后。

示例代码：

<template>
  <el-button @click="dialogVisible = true">打开Dialog</el-button>
  <el-dialog
    :visible.sync="dialogVisible"
    title="表单对话框"
    @open="resetForm"
  >
    <el-form :model="form" ref="formRef" label-width="80px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <!-- 其他表单项 -->
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
 
<script setup>
import { ref } from 'vue';
 
const dialogVisible = ref(false);
const form = ref({
  username: '',
  // 其他表单字段
});
const formRef = ref(null);
 
const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetFields();
  }
};
 
const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      // 提交表单逻辑
    } else {
      console.log('表单验证失败');
      return false;
    }
  });
};
</script>

在这个例子中，我们使用了ref来创建响应式的表单数据form和表单的引用formRef。在<el-dialog>的open事件中，我们调用了resetForm方法，它会使用formRef.value.resetFields()来重置表单。这样，当Dialog打开时，表单会被重置。