uni-app多规格选择核心是动态过滤：用户选中某规格后，其他规格选项需实时收缩为与已选组合匹配的有效值，而非仅按单规格库存判断；须基于完整skus预处理索引，用computed生成带disabled属性的渲染数组，确保视图响应。
uni-app 多规格选择的核心逻辑是“动态过滤”，不是静态禁用
用户点选一个规格（比如“红色”）后，其他规格项（如“尺寸”）的可选项必须实时收缩——只保留和“红色”能组成有效 SKU 的尺寸值。这背后不是简单地查 stock > 0，而是要基于已选规格组合，从完整 skus 列表中做子集匹配。
常见错误是：只判断单个规格值是否有库存，比如看到“M”在某个 SKU 里有货就让它可点，结果用户选完“红色+M”却发现没这个组合。本质是漏掉了“组合有效性”校验。
- 必须把后端返回的
skus数组预处理成可快速匹配的结构，比如以spec_str为 key 的 Map，或按规格维度建立索引 - 每次用户点击，都要重新计算“当前已选规格 + 待判断规格值”能否在
skus中找到匹配项 -
v-for渲染的规格按钮不能直接改disabled字段，得用computed生成带disabled属性的新数组，否则视图不更新
如何从后端数据生成可用规格集合（specs + skus）
后端通常返回两个关键字段：specs（规格维度定义）和 skus（实际存在的规格组合）。前端要做的第一件事，是把它们对齐成可联动的结构。
假设后端返回：
{
"specs": [
{ "name": "颜色", "values": ["红色", "白色", "黑色"] },
{ "name": "尺寸", "values": ["S", "M", "L"] }
],
"skus": [
{ "id": 1001, "spec_str": "红色_S", "price": 29900, "stock": 50 },
{ "id": 1002, "spec_str": "白色_M", "price": 29900, "stock": 30 }
]
}
你需要：
- 用
spec_str拆解出每个 SKU 对应的规格键值对，例如"红色_S"→{ 颜色: "红色", 尺寸: "S" } - 遍历所有
skus，为每个规格维度（如“颜色”）收集它在有效组合中出现过的全部取值，生成availableValues - 注意顺序：如果
specs是 [颜色, 尺寸]，那spec_str必须严格按此顺序拼接，否则匹配会错位
用户点击时如何实时禁用无效规格项
核心是写一个 getAvailableValues(specName) 函数，它接收当前待判断的规格名（如 "尺寸"），返回该规格下当前可选的值列表（如 ["S"]）。
实现逻辑：
- 提取当前已选规格构成的 map，例如
{ 颜色: "红色" } - 遍历所有
skus，筛选出满足“已选规格全部匹配”的 SKU 子集 - 从该子集中提取
specName对应的值，去重后返回 - 渲染时，对每个规格值调用
getAvailableValues("尺寸").includes("M")判断是否启用
性能提示：如果 skus 超过 100 条，建议提前建好索引，比如 indexByColor["红色"] = [{spec_str:"红色_S", stock:50}, ...]，避免每次遍历全量数组。
价格、库存、图片联动怎么同步更新
只要找到唯一匹配的 SKU，后续字段就是直取，但关键在于“唯一匹配”的判定条件必须严格：
- 只有当所有规格都已选满（即
selected.length === specs.length），才认为 SKU 已锁定 - 此时用完整
selectedmap 去匹配skus，找到那个spec_str完全一致的项 - 若匹配不到，说明是无效组合，应清空已选或提示“无对应规格”，而不是强行显示默认价格
- 图片更新同理：优先取匹配 SKU 的
image；若无，则 fallback 到商品主图
最容易被忽略的是“部分选择时的价格显示策略”——有些业务要求显示“最低价范围”，这需要额外遍历当前有效 SKU 子集求 min/max，不能只靠单条 SKU。
