动态增减表单项嵌套校验需确保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 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 推荐方式：定义通用规则，如
nameRule: [{ required: true, message: '名称必填' }]，然后所有动态项都绑定:rules="nameRule" - 避免嵌套 rules 写成
rules: { items: [ { name: [...] } ] }—— 这种结构 el-form 不识别，会导致 rules 不生效 - 深层嵌套时，rules 可保持扁平，只要 prop 路径能命中即可，例如：
rules: { 'items.0.name': [...], 'items.1.name': [...] }不实用，所以统一引用更合理
增删操作后需手动重置校验状态
Vue 响应式能更新视图，但 Element 的校验缓存不会自动清理。删除某一项后，若不干预，残留的校验状态可能报错“找不到字段”或提示错位。
立即学习“前端免费学习笔记（深入）”；
- 添加新项后，可调用
this.$nextTick(() => this.$refs.formRef.clearValidate())（Element UI）或formRef.resetFields()（Element Plus）来清空旧状态 - 删除某项时，建议先调用
this.$refs.formRef.clearValidate([`items.${index}.name`, `items.${index}.value`])显式清除对应字段校验 - 提交前统一校验，用
this.$refs.formRef.validate()即可，它会自动遍历所有已渲染且带 prop 的 el-form-item
表格内嵌表单要特别注意 scope.row 绑定和 key 稳定性
在 el-table 中循环渲染 el-form-item 时，容易忽略两个细节：
-
v-model必须绑定到scope.row.xxx，不能绑定到临时变量或计算属性，否则失去响应性 -
el-form-item的:key应基于唯一标识（如row.id或$index+ 时间戳），避免仅用$index导致 Vue diff 错乱，引发校验状态漂移 - 示例：
:prop="`tableData.${$index}.phone`"+:key="`phone-${$index}-${row.id || Date.now()}`"
