el-form 表单 一键重置搜索条件数据

我看到很多小伙伴，在做搜索的时候，重置的时候都是 一一把数据赋值为空，下面分享一个一键清空搜索条件的方法

在 Vue.js 中，formEl 是通过 ref 引用的 el-form 组件实例。以下是如何实现表单清空的详细解释：

1. ref 引用

<el-form
  :model="form"
  ref="FormRef"
  ...
>

• ref="FormRef"：将 el-form 组件实例引用为 FormRef，可以在 Vue 实例中通过 this.$refs.FormRef 访问。

2. 重置表单函数

import { FormInstance } from 'element-plus';
const FormRef = ref<FormInstance>();
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return; // 检查 formEl 是否存在
  formEl.resetFields(); // 调用 resetFields 方法清空表单
  getAll(); // 重新获取数据
};

• formEl.resetFields()：这是 Element Plus 中 el-form 组件提供的方法，用于重置表单字段。调用此方法会将表单中的所有字段值重置为初始值（通常是 model 中的值）。

3. 重置按钮

<el-button @click="resetForm(FormRef)">重置</el-button>

• @click="resetForm(FormRef)"：当按钮被点击时，调用 resetForm 函数，并将 FormRef 传递给它。由于 FormRef 是对 el-form 的引用，formEl 将指向该实例。

总结

通过 ref 引用 el-form 组件实例，并调用其 resetFields 方法，可以实现表单的清空和重置。这种方式简洁有效，符合 Vue 的响应式设计理念。