当前位置：首页 > VUE

vue实现sku算法

2026-02-18 19:46:05VUE

Vue 实现 SKU 算法

SKU（Stock Keeping Unit）算法用于处理商品的多规格组合选择，常见于电商平台。以下是基于 Vue 的实现方法：

数据结构设计

商品规格通常分为多个维度（如颜色、尺寸），每个维度有多个选项。数据结构示例：

vue实现sku算法

data() {
  return {
    specs: [
      {
        name: '颜色',
        values: ['红色', '蓝色']
      },
      {
        name: '尺寸',
        values: ['S', 'M']
      }
    ],
    skus: [
      { id: 1, specs: ['红色', 'S'], stock: 10 },
      { id: 2, specs: ['红色', 'M'], stock: 5 }
    ]
  }
}

核心算法实现

初始化选择状态

data() {
  return {
    selected: this.specs.map(spec => null) // 初始化为未选择
  }
}

计算可选状态

根据已选规格和库存数据，计算每个规格是否可选：

computed: {
  specStatus() {
    return this.specs.map((spec, specIndex) => {
      return spec.values.map(value => {
        // 临时构建当前选择路径
        const tempSelected = [...this.selected]
        tempSelected[specIndex] = value

        // 检查是否有匹配的SKU
        return this.skus.some(sku => {
          return tempSelected.every((sel, i) => 
            sel === null || sku.specs[i] === sel
          ) && sku.stock > 0
        })
      })
    })
  }
}

渲染规格选择器

模板中使用计算属性控制按钮状态：

vue实现sku算法

<div v-for="(spec, specIndex) in specs" :key="spec.name">
  <h3>{{ spec.name }}</h3>
  <button
    v-for="(value, valueIndex) in spec.values"
    :key="value"
    :disabled="!specStatus[specIndex][valueIndex]"
    @click="selectSpec(specIndex, value)"
    :class="{ active: selected[specIndex] === value }"
  >
    {{ value }}
  </button>
</div>

选择规格方法

methods: {
  selectSpec(specIndex, value) {
    this.$set(this.selected, specIndex, 
      this.selected[specIndex] === value ? null : value
    )
  }
}

完整选择判断

添加计算属性判断是否已选择完整规格组合：

computed: {
  isCompleteSelection() {
    return this.selected.every(s => s !== null)
  },
  selectedSku() {
    if (!this.isCompleteSelection) return null
    return this.skus.find(sku => 
      sku.specs.every((spec, i) => spec === this.selected[i])
    )
  }
}

优化性能

对于大量SKU的情况，可以使用字典优化查找：

created() {
  this.skuMap = this.skus.reduce((map, sku) => {
    map[sku.specs.join('|')] = sku
    return map
  }, {})
}

// 在specStatus中使用skuMap优化查找

完整示例组件

<template>
  <div>
    <div v-for="(spec, specIndex) in specs" :key="spec.name">
      <h3>{{ spec.name }}</h3>
      <button
        v-for="(value, valueIndex) in spec.values"
        :key="value"
        :disabled="!specStatus[specIndex][valueIndex]"
        @click="selectSpec(specIndex, value)"
        :class="{ active: selected[specIndex] === value }"
      >
        {{ value }}
      </button>
    </div>

    <div v-if="isCompleteSelection">
      <p>已选择：{{ selected.join(', ') }}</p>
      <p v-if="selectedSku">库存：{{ selectedSku.stock }}</p>
      <p v-else>该组合无货</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      specs: [], // 从API获取
      skus: [],  // 从API获取
      selected: [],
      skuMap: {}
    }
  },
  computed: {
    specStatus() {
      // ...同上实现
    },
    isCompleteSelection() {
      // ...同上实现
    },
    selectedSku() {
      // ...同上实现
    }
  },
  methods: {
    selectSpec(specIndex, value) {
      // ...同上实现
    }
  },
  created() {
    // 初始化skuMap
    // ...同上实现
  }
}
</script>