Vue 3 动态处理商品规格参数需实现结构可变、状态联动与数据聚合：解析多维规格组为二维结构，用 ref/reactive 管理分组与选中状态，监听变化实时计算组合路径并校验 SKU 有效性，最终按选中规格动态生成带价格/库存的 SKU 表格。
Vue 3 中处理商品规格参数的动态添加，核心在于“结构可变 + 状态联动 + 数据聚合”。不是简单地增删行，而是要应对规格组合爆炸、选中状态同步、SKU 表格自动生成等真实业务需求。下面从三个关键环节讲清楚怎么做。
规格数据结构要支持多维嵌套
后台返回的规格通常是分组结构，比如：
[
{"颜色": ["红色", "蓝色"]},
{"尺寸": ["S", "M", "L"]},
{"内存": ["128GB", "256GB"]}
]
前端不能硬编码字段名，而应解析为「规格组 × 规格值」二维结构。建议用 数组+对象混合结构 存储原始配置，并通过计算属性生成所有合法组合（笛卡尔积）。
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- 用
ref或reactive管理specGroups（原始分组）和selectedSpecs（用户当前勾选） - 每个规格组用唯一 key 标识（如
"spec_0"），避免用中文名作键名导致后续逻辑混乱 - 渲染时用
v-for套两层：外层遍历组，内层遍历该组下的值项
勾选交互需实时触发组合与校验
用户每勾选一个规格值，就可能影响其他组是否可选、SKU 是否已存在、库存是否为零。不能只做 UI 更新，必须联动状态机：
立即学习“前端免费学习笔记（深入）”；
- 监听
selectedSpecs变化，用watch或computed自动计算当前已选组合路径（如["红色", "M"]） - 已有 SKU 列表（
existingSkus）用于禁用重复组合或标记缺货项，可用Array.some()快速比对 - 提供「全选/取消」按钮时，注意区分「本组全选」和「跨组全选」，避免误清空其他组已选状态
SKU 表格要按组合结果动态生成
最终生成的 SKU 表格不是固定列，而是由用户所选规格组决定表头，再由所有有效组合填充行：
- 表头 = 所有已启用的规格组名（如
["颜色", "尺寸"]），加固定列价格、库存、SKU编码 - 表格数据 = 笛卡尔积结果（如
[["红色","S"], ["红色","M"], ["蓝色","S"]]），每行映射为一个skuItem对象 - 使用
ref([])存储skuTableData，每次选中变化后重新生成并赋值，Vue 会自动重绘v-for表格行 - 每行末尾放编辑/删除操作，支持单独修改某 SKU 的价格或库存，变更直接作用于对应
skuItem
