### ElementUI Form 表单中的 `ref` 属性 在 ElementUI 的 Form 组件中，`ref` 属性用于获取表单实例并对其进行操作。通过设置 `ref="formName"` 可以给表单指定一个名称，在 JavaScript 中可以通过 `$refs.formName` 来访问这个表单对象。 #### 获取表单实例 当需要手动控制表单的行为时（比如验证、重置），可以利用 `this.$refs.formName.validate()` 或者 `this.$refs.formName.resetFields()` 方法来实现[^1]。 #### 清除特定字段的校验结果 如果只想清除某个输入框的错误提示而不影响其他部分，则可以在相应的 `<el-form-item>` 上添加 `ref` 属性，并调用其上的 `clearValidate` 方法[^2]。 ```html <template> <div id="app"> <!-- 定义了一个名为 'ruleForm' 的表单 --> <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="用户名：" prop="username" ref="usernameItem"> <el-input v-model.number="ruleForm.username"></el-input> </el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button> <el-button @click="resetForm('ruleForm')">重置</el-button> <!-- 单独清除 username 字段的校验状态按钮 --> <el-button @click="clearUsernameValidation">单独清除用户名校验</el-button> </el-form> </div> </template> <script> export default { data() { var checkAge = (rule, value, callback) => { if (!value) { return callback(new Error('请输入年龄')); } setTimeout(() => { if (!Number.isInteger(value)) { callback(new Error('请输入数字值')); } else { if (value < 18) { callback(new Error('必须年满18岁')); } else { callback(); } } }, 1000); }; return { ruleForm: { username: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' } ] } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); }, clearUsernameValidation(){ // 调用了 el-form-item 上定义的 ref 值 "usernameItem" this.$refs['usernameItem'].clearValidate() } } }; </script> ```