### el-form 中处理数组对象的方法 在 `el-form` 组件中处理数组对象的关键在于正确配置 `:model` 和 `:rules` 属性，并通过动态生成的 `v-for` 循环为每个表单项分配唯一的 `prop` 值。 #### 动态生成表单项并实现校验 为了使 `el-form` 能够识别和校验数组中的每一项，需要确保每条记录都有唯一标识符作为其属性路径的一部分。这可以通过组合字符串的方式完成： ```html <template> <el-form ref="dynamicForm" :model="formData" :rules="formRules"> <div v-for="(item, index) in formData.items" :key="index"> <!-- 使用计算后的 prop --> <el-form-item :label="'Item ' + (index + 1)" :prop="'items.' + index + '.value'" required> <el-input v-model="item.value"></el-input> </el-form-item> <!-- 如果有更多字段可以继续添加类似的结构 --> </div> <el-button type="primary" @click="handleSubmit">Submit</el-button> </el-form> </template> ``` 在此模板中，`:prop="'items.' + index + '.value' "` 是指定了当前迭代项目的具体位置，从而允许 `el-form` 对应地应用验证规则[^1]。 #### 定义模型与规则 对于上述 HTML 结构对应的 JavaScript 部分，则需定义好初始的数据模型以及相应的验证规则： ```javascript export default { data() { return { formData: { items: [ { value: '' }, // 可以预设多个默认项目... ] }, formRules: { 'items.*.value': [{ required: true, message: 'This field is required', trigger: ['blur'] }] } }; }, methods: { handleSubmit() { this.$refs.dynamicForm.validate((valid) => { if (!valid) { console.log('Validation failed'); return false; } else { console.log('Validated successfully!'); } }); } } }; ``` 这里 `'items.*.value'` 表达式的含义是指向所有位于 `items` 数组下的子对象内的 `value` 字段；星号(*)表示匹配任意索引的位置[^2]。 #### 支持更复杂的嵌套结构 当面对更加复杂的情况——比如多层嵌套的对象时，同样遵循相同的原则构建 `prop` 参数即可。例如，在三层嵌套的情况下可采用如下形式指定特定元素的路径： ```html <!-- 更深层次的例子 --> <el-form-item :label="'Resolver Config One'" :prop="'fieldList.' + customRuleIndex + '.resolverEntities.' + decodeRuleIndex + '.resolverConfigOne'" > ... </el-form-item> ``` 这种做法使得即使是在非常深的层次上也能精确控制各个组件的行为及其关联的验证逻辑[^3]。