当前位置：首页 > VUE

vue实现sku组合

2026-01-18 22:42:07VUE

Vue实现SKU组合的方法

SKU（Stock Keeping Unit）是商品库存管理的基本单位，通常由多个属性组合而成。在电商系统中，实现SKU组合可以帮助用户选择商品的不同属性组合，并实时显示库存状态。

数据结构设计

需要准备商品属性和SKU库存数据。属性通常以数组形式存储，每个属性包含多个可选值。SKU库存数据则包含所有可能的属性组合及其库存信息。

data() {
  return {
    attributes: [
      { name: '颜色', values: ['红色', '蓝色', '绿色'] },
      { name: '尺寸', values: ['S', 'M', 'L'] }
    ],
    skus: [
      { color: '红色', size: 'S', stock: 10 },
      { color: '红色', size: 'M', stock: 5 },
      { color: '蓝色', size: 'L', stock: 8 }
    ],
    selected: {}
  }
}

属性选择处理

为每个属性创建选择方法，更新当前选中的属性值。使用Vue的响应式特性自动更新界面。

methods: {
  selectAttribute(attrName, value) {
    this.$set(this.selected, attrName, value)
    this.checkAvailability()
  }
}

可用性检查

根据当前选中的属性组合，检查哪些属性值是可选的。禁用无库存的属性组合，提升用户体验。

methods: {
  checkAvailability() {
    this.attributes.forEach(attr => {
      attr.values.forEach(value => {
        const tempSelected = { ...this.selected, [attr.name]: value }
        const isAvailable = this.skus.some(sku => 
          Object.keys(tempSelected).every(key => sku[key] === tempSelected[key])
        )
        // 更新属性值的可用状态
      })
    })
  }
}

库存显示

计算当前选中组合的库存量，实时显示给用户。使用计算属性自动响应选择变化。

computed: {
  currentStock() {
    const found = this.skus.find(sku => 
      Object.keys(this.selected).every(key => sku[key] === this.selected[key])
    )
    return found ? found.stock : 0
  }
}

界面渲染

使用v-for循环渲染属性列表，绑定选择事件和禁用状态。根据业务需求调整样式和交互细节。

<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, value)"
    :class="{ active: selected[attr.name] === value }"
    :disabled="!isAvailable(attr.name, value)"
  >
    {{value}}
  </button>
</div>
<p>当前库存: {{currentStock}}</p>