【Element】一键重置表单resetFields

在 Element Plus 中，resetFields 方法是用于重置 el-form

组件中的表单字段到其初始值，并移除校验结果。这个方法非常实用，特别是在用户需要清空表单并重新开始填写，或者表单验证失败后需要重置表单以允许用户重新输入时。

以下是使用 resetFields 方法的一些关键点和示例：

使用关键点

‌设置 ref‌：

为了能够在 Vue 实例中调用 resetFields 方法，你需要在 el-form 组件上设置一个 ref 属性。这个 ref 属性将用作对该表单组件的引用。

‌双向绑定 model‌：

el-form 组件的 model 属性应该与 Vue 实例中的一个数据对象进行双向绑定。这个数据对象包含了表单中所有字段的值。

‌确保 prop 属性‌：

每个 el-form-item 组件都需要一个 prop 属性，其值应该与 model 对象中对应字段的键名相匹配。这是 resetFields 方法能够正确重置字段值的关键。

‌初始值设置‌：

如果希望在重置表单时能够恢复到特定的初始值，而不是简单的清空字段，那么需要在 Vue 实例的数据对象中明确设置这些初始值。

示例代码

<template>
  <el-form :model="form" ref="myForm">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
      },
    };
  },
  methods: {
    submitForm() {
      // 表单提交逻辑
      console.log(this.form);
    },
    resetForm() {
      this.$refs.myForm.resetFields();
    },
  },
};
</script>

在这个示例中，当用户点击"重置"按钮时，resetForm 方法会被调用，进而调用 this.$refs.myForm.resetFields() 来重置表单。这将把表单字段重置为它们的初始值，并移除校验结果。

注意事项

确保 el-form 组件上设置了正确的 ref 属性。

确保每个 el-form-item 组件的 prop 属性与 model 对象中对应字段的键名相匹配。

如果需要在重置后恢复到特定的初始值，确保在 data 函数中正确设置了这些初始值。

通过正确使用 resetFields 方法，你可以轻松地在 Element Plus 中实现表单的重置功能。