库存不足规格必须实时禁用，每次点击后需用当前已选组合查询skuList，过滤stock>0的有效SKU并提取对应规格值；常见错误是直接渲染原始specs未动态过滤，导致显示不可用选项。

库存不足的规格项必须实时禁用，不能靠静态判断或缓存状态——每次点击后都要用当前已选规格组合去查 skuList，过滤出 stock > 0 的所有有效组合，再提取对应规格值。

为什么点完颜色后尺寸全灰了？

常见错误是把后端返回的原始 specs（如 ["红", "白", "黑"]）直接渲染，没做动态过滤。比如实际只有 { spec_str: "红_S", stock: 10 } 和 { spec_str: "白_M", stock: 0 }，但 UI 仍显示“白”可点、“M”可点，用户选完才发现没货。

• 后端返回的 skuList 必须含 specs 数组字段（如 ["红色", "XL"]），不能只给 skuCode 或拼接字符串
• 不要用 spec_str.split("_") 这类硬拆逻辑——规格名含下划线、中英文混用时会崩
• 真机上点击无反馈，大概率是没加 cursor: pointer，微信小程序原生组件不自动带手型

如何写 isSpecDisabled 过滤函数

这个函数不是查“有没有这个规格”，而是查“在当前已选条件下，选它能否组成至少一个有库存的 SKU”。它必须每次调用都遍历 skuList，不能缓存结果。

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

• 输入参数是 specName（如 "颜色"）和 specValue（如 "红色"），别传成 "颜色_红色" 字符串
• 内部逻辑：先筛选出所有满足 selectedValues 的 SKU 子集，再检查这些 SKU 中是否存在 specName === specValue 的条目
• 示例：

  isSpecDisabled(specName, specValue) {
    const matchedSkus = this.skuList.filter(sku => {
      return Object.keys(this.selectedValues).every(key => 
        this.selectedValues[key] === sku.specs[this.specList.findIndex(s => s.name === key)]
      )
    })
    return !matchedSkus.some(sku => {
      const idx = this.specList.findIndex(s => s.name === specName)
      return sku.specs[idx] === specValue && sku.stock > 0
    })
  }

清空后续规格并重算禁用态的关键时机

用户改选前面的规格时，“后面选项为什么不更新”本质是响应式依赖断裂——selectedValues 更新了，但 computed 没立刻感知或没覆盖全部键。

• 不能分步操作：this.selectedValues.color = "绿色" → this.$nextTick(() => this.updateDisabled())，因为 $nextTick 只等一次渲染，而 updateDisabled 里用的还是旧 selectedValues 快照
• 必须合并赋值：this.$set(this, 'selectedValues', { ...this.selectedValues, color: "绿色" })，再立刻触发 computed 重新求值
• 点完“颜色”后，要删掉所有排在它后面的规格键：Object.keys(this.selectedValues).forEach(key => { if (this.specList.findIndex(s => s.name === key) > currentIndex) this.$delete(this.selectedValues, key) })

最易被忽略的是：SKU 数据结构不统一。有的后端返回 specs: ["红", "XL"]，有的返回 specs: { 颜色: "红", 尺寸: "XL" }，还有的把规格值存在 properties 字段里——没做标准化预处理，isSpecDisabled 函数写得再对也白搭。