当前位置：首页 > VUE

vue sku 实现

2026-03-07 16:00:30VUE

Vue SKU 实现

在电商系统中，SKU（Stock Keeping Unit）是商品的最小库存单位，通常由多个属性组合而成（如颜色、尺寸等）。以下是基于 Vue 实现 SKU 选择功能的核心方法和代码示例。

数据结构设计

SKU 的实现通常需要定义商品属性和 SKU 列表。以下是一个基础数据结构示例：

vue 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: 120 },
      { color: '蓝色', size: 'L', stock: 0, price: 150 }
    ],
    // 用户已选中的属性
    selected: {
      color: '',
      size: ''
    }
  }
}

动态计算可用 SKU

根据用户选择的属性，过滤出可用的 SKU 组合，并禁用无库存的选项：

vue sku 实现

computed: {
  // 获取当前可选的 SKU 组合
  availableSkus() {
    return this.skus.filter(sku => {
      return (
        (this.selected.color === '' || sku.color === this.selected.color) &&
        (this.selected.size === '' || sku.size === this.selected.size)
      )
    })
  },

  // 禁用无库存的属性选项
  disabledItems() {
    const disabled = {}
    this.attributes.forEach(attr => {
      attr.values.forEach(value => {
        const key = `${attr.name.toLowerCase()}:${value}`
        disabled[key] = !this.skus.some(sku => {
          const matchSelected = Object.entries(this.selected)
            .filter(([k, v]) => k !== attr.name.toLowerCase())
            .every(([k, v]) => v === '' || sku[k] === v)
          return matchSelected && sku[attr.name.toLowerCase()] === value && sku.stock > 0
        })
      })
    })
    return disabled
  }
}

模板渲染

在模板中渲染属性选择器，并根据计算属性禁用不可选项：

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

  <div v-if="availableSkus.length">
    <p>可选 SKU: {{ availableSkus.length }}</p>
    <p>价格范围: {{ minPrice }} - {{ maxPrice }}</p>
  </div>
</template>

完整交互逻辑

添加方法处理用户选择，并计算价格范围等：

methods: {
  resetSelection() {
    this.selected = { color: '', size: '' }
  }
},
computed: {
  minPrice() {
    return Math.min(...this.availableSkus.map(sku => sku.price))
  },
  maxPrice() {
    return Math.max(...this.availableSkus.map(sku => sku.price))
  }
}