当前位置：首页 > VUE

vue实现sku选择

2026-01-19 13:45:37VUE

Vue 实现 SKU 选择

在电商项目中，SKU（Stock Keeping Unit）选择是一个常见的功能需求，通常用于用户选择商品的不同属性组合（如颜色、尺寸等）。以下是实现方法：

数据结构设计

通常需要设计两个核心数据结构：商品属性和 SKU 列表。

data() {
  return {
    // 商品属性
    attributes: [
      {
        name: '颜色',
        values: ['红色', '蓝色', '绿色']
      },
      {
        name: '尺寸',
        values: ['S', 'M', 'L']
      }
    ],
    // SKU 列表
    skus: [
      { color: '红色', size: 'S', stock: 10, price: 100 },
      { color: '红色', size: 'M', stock: 5, price: 110 },
      { color: '蓝色', size: 'L', stock: 8, price: 120 }
    ],
    // 用户当前选择
    selected: {
      color: null,
      size: null
    }
  }
}

属性选择逻辑

实现属性选择的方法，并检查库存状态：

vue实现sku选择

methods: {
  selectAttribute(attrName, value) {
    this.selected[attrName] = value
    this.checkAvailability()
  },

  checkAvailability() {
    this.attributes.forEach(attr => {
      attr.values.forEach(value => {
        const key = attr.name.toLowerCase()
        const tempSelected = {...this.selected, [key]: value}
        const isAvailable = this.skus.some(sku => {
          return Object.keys(tempSelected).every(k => 
            !tempSelected[k] || sku[k] === tempSelected[k]
          )
        })
        // 可以在这里标记不可选项
      })
    })
  }
}

模板渲染

在模板中渲染属性和处理选择事件：

<div v-for="attr in attributes" :key="attr.name">
  <h3>{{ attr.name }}</h3>
  <button 
    v-for="value in attr.values"
    :key="value"
    @click="selectAttribute(attr.name.toLowerCase(), value)"
    :class="{ active: selected[attr.name.toLowerCase()] === value }"
  >
    {{ value }}
  </button>
</div>

完整 SKU 匹配

当用户选择完所有属性后，匹配对应的 SKU：

vue实现sku选择

computed: {
  matchedSku() {
    return this.skus.find(sku => 
      Object.keys(this.selected).every(key => 
        sku[key] === this.selected[key]
      )
    )
  }
}

状态反馈

根据匹配结果提供反馈：

<div v-if="matchedSku">
  已选择：{{ matchedSku.color }} {{ matchedSku.size }}
  价格：{{ matchedSku.price }}
  库存：{{ matchedSku.stock }}
</div>
<div v-else>
  请选择完整的商品规格
</div>