### Element UI `el-form` 表单重置无效的原因分析 在 Vue.js 结合 Element-UI 开发表单时，如果发现 `resetFields()` 方法无法正常工作，通常是因为以下几个原因： #### 1. 缺少 `prop` 属性 确保所有的 `el-form-item` 组件都正确设置了 `prop` 属性。该属性指定了要验证字段的名字，只有设置此属性才能使 `resetFields()` 正常工作[^3]。 ```html <el-form :model="ruleForm" ref="formRef"> <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> </el-form> ``` #### 2. 数据模型未初始化 确认数据模型已经定义并赋初值，在调用 `resetFields()` 前，这些初始值会被用来恢复表单的状态。如果没有给定默认值，则即使执行了重置操作也不会有任何变化[^1]。 ```javascript data() { return { ruleForm: { name: '' } }; } ``` #### 3. 参考对象不匹配 检查是否正确获取到了对应的 form 实例引用 (`this.$refs.formRef`) 。这一步骤对于能够访问到具体的 Form 对象至关重要；错误的选择器可能会导致找不到目标实例从而使得函数失效[^2]。 ```javascript methods: { handleReset(formName) { this.$refs[formName].resetFields(); } } ``` ### 完整示例代码展示 下面给出一段完整的 HTML 和 JavaScript 代码片段作为示范，展示了如何正确配置和使用 `resetFields()` 函数: ```html <!-- template --> <div id="app"> <el-button @click="submitForm('ruleForm')">提交</el-button> <el-button @click="resetForm('ruleForm')">重置</el-button> <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm"> <!-- 添加更多项... --> <el-form-item label="用户名" prop="username"> <el-input type="text" v-model="ruleForm.username"/> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="ruleForm.password"/> </el-form-item> </el-form> </div> ``` ```javascript // script new Vue({ el: '#app', data() { var validatePass = (rule, value, callback) => { if (value === '') { callback(new Error('请输入密码')); } else { callback(); } }; return { ruleForm: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' } ], password: [{ validator: validatePass, trigger: 'blur' }] } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) alert('submit!'); else console.log('error submit!!'); }); }, resetForm(formName) { this.$refs[formName].resetFields(); } } }); ```