当前位置：首页 > news >正文

resetForm() 方法用于重置表单

news 来源：原创 2025/6/27 3:18:50

resetForm() 方法是 Vue.js 中用于重置表单的一个常见操作。下面是对这段代码的详细解析：

1. 代码作用

resetForm() 方法的作用是重置表单，将表单中的所有输入字段恢复到初始状态（通常是清空或恢复到默认值）。

2. 代码解析

resetForm() {
  this.$refs.form.resetFields();
}

2.1 `this.$refs.form`

this.$refs：Vue.js 提供的一个特殊属性，用于访问模板中通过 ref 属性注册的 DOM 元素或组件实例。
form：在模板中，<el-form> 组件通过 ref="form" 注册了一个引用。this.$refs.form 就是对这个 <el-form> 组件实例的引用。

2.2 `resetFields()`

resetFields()：这是 Element UI 的 el-form 组件提供的一个方法，用于重置表单字段的值。
- 如果表单字段有初始值（通过 model 绑定的初始数据），则会将字段重置为初始值。
- 如果表单字段没有初始值，则会清空字段内容。
- 同时，该方法还会清除表单的验证状态（例如，清除错误提示）。

3. 使用场景

resetForm() 方法通常在以下场景中使用：

新增数据时：在打开新增数据的对话框时，调用 resetForm() 清空表单，确保表单是干净的。
取消操作时：当用户点击“取消”按钮时，调用 resetForm() 重置表单，避免残留数据影响下一次操作。

4. 示例

假设在模板中有如下表单：

<el-form ref="form" :model="form" :rules="rules">
  <el-form-item label="姓名" prop="name">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="年龄" prop="age">
    <el-input v-model="form.age"></el-input>
  </el-form-item>
</el-form>

在脚本中定义 form 数据：

data() {
  return {
    form: {
      name: '',
      age: ''
    }
  };
}

当调用 resetForm() 时：

如果 form.name 和 form.age 有初始值（例如 name: '张三', age: '20'），则表单字段会重置为这些初始值。
如果没有初始值，则表单字段会被清空。

5. 注意事项

resetFields() 依赖于 prop 属性：在 el-form-item 中，必须设置 prop 属性，否则 resetFields() 无法正确重置该字段。
初始值的来源：resetFields() 会将字段重置为 model 绑定的初始值，因此如果需要清空表单，确保 model 中的初始值为空或默认值。

6. 完整示例

以下是一个完整的示例，展示了 resetForm() 的使用：

<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="form.age"></el-input>
      </el-form-item>
    </el-form>
    <el-button @click="resetForm">重置表单</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        age: ''
      },
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        age: [{ required: true, message: '请输入年龄', trigger: 'blur' }]
      }
    };
  },
  methods: {
    resetForm() {
      this.$refs.form.resetFields();
    }
  }
};
</script>