Vue 3 中数组子项单独验证需为每个子项分配独立 formRef：用 ref 数组存储，模板中按索引绑定；校验时 Promise.allSettled 批量执行并汇总结果；增删项时同步更新 ref 数组；rules 按子项数据结构定义，并用索引路径绑定 prop。
Vue 3 中处理数组子项的单独验证，核心是让每个子项拥有独立的表单实例或校验上下文，避免互相干扰。不是把整个数组塞进一个 el-form，而是为每个子项动态生成一个可独立调用 validate() 的表单 ref。
每个子项绑定独立的 formRef
当使用 v-for 渲染多个表单项（如“新增一条配置”），应为每个循环项分配唯一的 ref，而不是共用一个 ref 变量：
- 用
ref数组存储所有子表单实例：const formRefs = ref([]) - 模板中通过索引绑定：
<el-form :ref="(el) => { if (el) formRefs.value[index] = el }"> - 这样每个子表单都有自己的
FormInstance，可单独调用formRefs.value[i]?.validate()
校验全部子项并汇总结果
提交时需批量触发所有子表单校验，并统一判断是否全部通过：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 用
Promise.all并发执行所有子表单的validate()（它返回 Promise） - 捕获每个校验的异常（Element Plus 校验失败会 reject），或改用
try/catch分别处理 - 示例逻辑：
const results = await Promise.allSettled(formRefs.value.map(f => f?.validate?.()))，再检查是否全为fulfilled
动态增删时保持 ref 关系正确
数组长度变化后，ref 数组需同步更新，否则会出现索引错位或空值：
立即学习“前端免费学习笔记（深入）”；
- 删除某项时，记得同时从
formRefs.value中移除对应位置的 ref（可用splice(index, 1)） - 新增项时，确保新 ref 被推入数组末尾；若用
push或响应式赋值，ref 回调会自动补位 - 避免在
v-for中直接写ref="formRefs"（这会让所有项共享一个 ref，变成数组，但失去索引可控性）
配合 rules 实现子项内字段级校验
每个子表单的 rules 应基于其自身数据结构定义，而非父级全局规则：
- 例如子项数据是
{ name: '', age: null }，则 rules 写成{ name: [{ required: true }], age: [{ type: 'number', required: true }] } - 若用 computed 动态生成 rules，确保依赖项（如当前子项索引、数据源）变化时能重新计算
- prop 属性需带索引路径，如
:prop="`items[${index}].name`"，让校验器精准定位字段
