element-plus重置表单

element-plus提供了resetFields方法来重置表单。在官网的示例代码中，首先需要设置el-form的ref、:model和:rules属性。然后使用ref创建一个表单实例的引用，例如`const ruleFormRef = ref<FormInstance>()`。接着使用reactive创建一个响应式的表单数据对象，例如`const ruleForm = reactive({ name: 'Hello', region: '', ... })`。再创建一个响应式的规则对象，例如`const rules = reactive<FormRules>({ name: \[{ required: true, message: 'Please input Activity name', trigger: 'blur' }, { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }, \], ... })`。最后定义一个resetForm函数来重置表单，例如`const resetForm = (formEl: FormInstance | undefined) => { if (!formEl) return formEl.resetFields() }`。通过调用resetForm函数并传入表单实例，即可实现表单的重置功能。\[1\]

另外，根据引用\[2\]的描述，也可以尝试使用resetFields方法的另一种方式来实现部分表单项的重置。可以将需要重置的表单项的prop值作为一个数组传入resetFields方法中，即可实现部分表单项的重置功能。

总结起来，element-plus提供了resetFields方法来重置表单，可以通过表单实例调用该方法来实现表单的重置功能。\[2\]\[3\]
#### 引用[.reference_title]
- *1* [重置element-plus表单 Vue3](https://blog.csdn.net/tida_yake/article/details/128275955)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [Vue3+Element-Plus,重置指定表单项](https://blog.csdn.net/weixin_46873254/article/details/128233691)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [Vue3+Element-Plus 登录功能表单重置实现十二](https://blog.csdn.net/weixin_39237340/article/details/121410461)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]