当前位置：首页 > VUE

vue sku 实现

2026-03-28 02:05:06VUE

Vue SKU 实现方案

在电商项目中，SKU（Stock Keeping Unit）是商品属性的组合，通常需要实现动态选择、库存校验等功能。以下是基于 Vue 的实现方案。

数据结构设计

SKU 数据通常包含以下部分：

规格列表（规格名和规格值）：如颜色、尺寸等。
SKU 列表：每个 SKU 包含具体规格组合和库存信息。

示例数据结构：

data() {
  return {
    specs: [
      { name: '颜色', values: ['红色', '蓝色'] },
      { name: '尺寸', values: ['S', 'M'] }
    ],
    skus: [
      { specs: ['红色', 'S'], stock: 10 },
      { specs: ['蓝色', 'M'], stock: 5 }
    ],
    selectedSpecs: {} // 记录用户选择的规格
  }
}

核心功能实现

规格选择交互 通过 v-for 渲染规格列表，绑定点击事件更新选中状态：

<div v-for="spec in specs" :key="spec.name">
  <div>{{ spec.name }}</div>
  <button 
    v-for="value in spec.values"
    :key="value"
    @click="selectSpec(spec.name, value)"
    :class="{ active: isSelected(spec.name, value) }">
    {{ value }}
  </button>
</div>

选择逻辑

methods: {
  selectSpec(name, value) {
    this.$set(this.selectedSpecs, name, value)
  },
  isSelected(name, value) {
    return this.selectedSpecs[name] === value
  }
}

SKU 匹配与库存校验

计算当前选择的 SKU 通过比对已选规格与 SKU 列表，找到匹配项：

computed: {
  currentSku() {
    const selectedValues = Object.values(this.selectedSpecs)
    return this.skus.find(sku => 
      sku.specs.every(val => selectedValues.includes(val))
    )
  }
}

禁用无库存规格 在渲染时检查规格是否可用：

methods: {
  isDisabled(name, value) {
    const tempSelected = { ...this.selectedSpecs, [name]: value }
    const selectedValues = Object.values(tempSelected)
    return !this.skus.some(sku =>
      sku.specs.every(val => selectedValues.includes(val)) && sku.stock > 0
    )
  }
}

完整组件示例

<template>
  <div>
    <!-- 规格选择 -->
    <div v-for="spec in specs" :key="spec.name">
      <div>{{ spec.name }}</div>
      <button 
        v-for="value in spec.values"
        :key="value"
        @click="selectSpec(spec.name, value)"
        :class="{ 
          active: isSelected(spec.name, value),
          disabled: isDisabled(spec.name, value)
        }"
        :disabled="isDisabled(spec.name, value)">
        {{ value }}
      </button>
    </div>

    <!-- 结果显示 -->
    <div v-if="currentSku">
      已选：{{ currentSku.specs.join(', ') }} | 库存：{{ currentSku.stock }}
    </div>
  </div>
</template>