在 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 中实现表单的重置功能。
