Vue中computed实现动态规格矩阵的核心是响应式过滤逻辑而非静态表格渲染，采用specs与goodsList扁平化结构，通过specMatrix计算属性生成二维联动数组，并用canSelect实时校验可选性。
用 Vue 的 computed 实现动态规格矩阵，核心不是“画表格”，而是让每行每列的可选状态随已选规格实时联动——它本质是过滤逻辑的响应式表达，不是静态渲染。
规格矩阵的数据结构要扁平化
别嵌套多层对象。推荐统一用两个基础结构：
-
specs：规格类型到值的映射，如
{ color: ['红色', '蓝色'], size: ['S', 'M'] } -
goodsList：商品列表，每个商品带
specMap，如{ color: '红色', size: 'M', skuId: '1001' }
这种结构让 computed 能快速做字段级匹配，也方便后续加库存、禁用等状态。
用 computed 动态生成可用规格组合
写一个 specMatrix 计算属性，返回二维数组形式的“矩阵”（实际是逻辑关系，非 DOM 表格）：
立即学习“前端免费学习笔记（深入）”；
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 第一维是规格类型（如 ['颜色', '尺寸']）
- 第二维是该类型下当前可选的值（根据已选其他规格实时过滤）
例如已选 { color: '红色' }，则 specMatrix[1]（尺寸）只返回 ['S', 'M'] ——前提是这两个尺寸在 goodsList 中有对应 color === '红色' 的商品。
联动禁用逻辑靠 canSelect 判断
每个规格项是否可点，不能靠前端硬编码，而应实时计算：
- 点击某规格值前，先构造完整选中状态（如
{ color: '红色', size: 'L' }） - 检查
goodsList.some(g => Object.keys(newSel).every(k => g.specMap[k] === newSel[k])) - 不满足则该值置灰，或直接跳过渲染
这个判断必须覆盖所有已选 + 当前待选，漏掉任意一项都会导致“选完无货”。
最终渲染可结合 v-for 嵌套生成矩阵 UI
模板里用两层 v-for 即可还原常见规格选择器布局：
- 外层遍历
specMatrix得到类型名和可选项列表 - 内层遍历可选项，绑定
@click="selectSpec(type, value)" - 通过
:class="{ disabled: !canSelect(type, value) }"控制样式
不需要手动维护二维数组索引或行列关系，所有状态均由 computed 自动驱动，数据变，矩阵自动重算。
