动态增减表单项嵌套校验需确保prop路径唯一可寻址、rules结构匹配数据层级、增删后手动同步校验状态；prop须含索引如items.${index}.name，rules推荐复用统一规则数组，删除项需显式清除对应字段校验。
动态增减表单项的嵌套校验，核心在于让每个表单项拥有唯一、可寻址的校验路径，同时保证 Vue 响应式与 Element UI（或 Element Plus）校验器协同工作。不靠“试错”，关键在三点：prop 路径写对、rules 结构匹配、数据变更后校验状态及时同步。
prop 必须带索引路径，不能写死字段名
Element 的 el-form-item 依赖 prop 字符串去 model 中精准定位字段。数组项不能共用同一个 prop，否则校验会串行或只作用于首项。
- 错误写法：
:prop="'name'"—— 所有项都指向顶层 name，校验失效 - 正确写法：
:prop="`items.${index}.name`"或:prop="`hobbies.${index}.content`" - 多层嵌套也一样，比如设备部位含任务列表：
:prop="`partsList.${pIndex}.taskList.${tIndex}.taskName`"
rules 需按层级结构组织，避免直接复用扁平规则
校验规则对象要与数据结构对齐。如果 form.items 是数组，rules.items 就不该是单条规则对象，而应是规则数组，或统一用同一组规则引用（推荐后者，更简洁）。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章