elementui resetform

elementui resetform 方法详解

在 Element UI 中，resetForm 方法用于重置表单字段至初始值。该方法通常与 el-form 组件配合使用。

基本用法

通过 ref 获取表单实例后调用 resetForm 方法：

this.$refs.formName.resetFields()

注意事项

resetForm 实际对应的方法是 resetFields，该方法会重置表单内所有字段的值并移除校验结果。表单字段需设置 prop 属性才能被正确重置。

完整示例代码

<template>
  <el-form ref="form" :model="formData" label-width="120px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="formData.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="formData.password" type="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 {
      formData: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 表单验证通过
        }
      })
    },
    resetForm() {
      this.$refs.form.resetFields()
    }
  }
}
</script>

方法说明

resetFields 会将表单所有字段重置为初始值（组件挂载时的值），而非清空表单。如果需要清空表单而非重置，可以直接将表单数据对象赋值为空值。

动态表单处理

对于动态生成的表单字段，确保每个字段都设置了正确的 prop 属性，否则这些字段不会被 resetFields 方法重置。prop 属性值应与表单数据对象的属性路径一致。