### 动态校验 `el-form` 中的数组对象 对于包含数组对象的 `el-form` 表单，在 Vue.js 和 Element UI 组合下实现动态校验的关键在于正确配置表单项路径以及设置对应的验证规则。通过使用特定格式来定义 prop 属性，可以使得每个子项都能被独立校验。 当处理由多个相同结构的对象组成的列表时，可以通过如下方式指定每条记录下的字段名称： ```html <template> <el-form ref="dynamicForm" :model="formItemArr" :rules="rules"> <div v-for="(item, index) in formItemArr" :key="index"> <!-- 使用计算后的字符串作为prop --> <el-form-item :label="'Name ' + (index + 1)" :prop="'formItemArr.' + index + '.name'" :rules="rules.name" > <el-input v-model="item.name"></el-input> </el-form-item> <el-button @click.prevent="removeFormItem(index)">Remove</el-button> </div> <el-button type="primary" @click="submitForm('dynamicForm')">Submit</el-button> <el-button @click="addFormItem">Add Item</el-button> </el-form> </template> ``` 为了确保上述代码能够正常工作并触发相应的校验逻辑，还需要初始化数据模型和设定合理的校验规则： ```javascript <script> export default { data() { return { formItemArr: [ { name: '' } ], rules: { name: [{ required: true, message: 'Please input the name', trigger: 'blur' }] } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); }, addFormItem() { this.formItemArr.push({ name: '' }); }, removeFormItem(index) { this.formItemArr.splice(index, 1); } } }; </script> ``` 此方法允许开发者轻松管理具有复杂嵌套关系的数据结构，并且能够在运行时根据实际需求调整表单的内容及其关联的校验条件[^1]。