resetfield elementui

重置表单字段（resetField）的使用方法

在Element UI中，resetField方法用于重置表单中的单个字段到初始值。该方法通常与表单验证和字段重置场景结合使用。

调用方式 表单实例通过ref获取后，调用resetField方法并传入字段名：

this.$refs.formName.resetField('fieldName');

注意事项

• 必须在表单字段上明确定义prop属性，否则resetField无法生效
• 重置的值会恢复到字段初始绑定的v-model值，而非空值
• 如需清空而非重置，应使用clearValidate配合手动置空

重置整个表单（resetFields）

与单个字段重置不同，resetFields会重置整个表单所有字段到初始状态：

this.$refs.formName.resetFields();

特性说明

• 会同时清除所有表单验证状态
• 所有字段必须定义prop属性
• 适用于表单提交后的整体重置场景

常见问题解决方案

resetField无效的排查步骤 检查字段prop是否与v-model路径一致，例如：

<el-form-item prop="user.name">
  <el-input v-model="form.user.name"></el-input>
</el-form-item>

动态表单字段处理 对于动态生成的字段，需确保在字段添加后调用resetFields：

this.form.items.push(newItem);
this.$nextTick(() => {
  this.$refs.form.resetFields();
});

与验证方法的配合使用 重置后如需重新验证，应组合使用：

this.$refs.form.resetFields();
this.$refs.form.validate();