当前位置：首页 > VUE

vue商品多规格实现

2026-02-22 04:49:58VUE

Vue 商品多规格实现方案

多规格商品（如颜色、尺寸等）是电商系统的常见需求，以下是基于 Vue 的实现方案：

数据结构设计

商品规格通常采用树形结构，需定义两个核心数据对象：

// 规格类型（如颜色、尺寸）
specs: [
  { id: 1, name: '颜色', values: ['红', '蓝'] },
  { id: 2, name: '尺寸', values: ['S', 'M', 'L'] }
]

// SKU组合及库存
skus: [
  { id: 1, specs: ['红', 'S'], price: 100, stock: 10 },
  { id: 2, specs: ['红', 'M'], price: 110, stock: 5 }
]

规格选择交互实现

使用计算属性处理规格联动逻辑：

vue商品多规格实现

computed: {
  // 获取可选规格组合
  availableCombinations() {
    return this.skus.filter(sku => 
      sku.specs.every((spec, index) => 
        !this.selectedSpecs[index] || 
        this.selectedSpecs[index] === spec
      )
    )
  }
}

界面渲染示例

采用嵌套循环渲染规格选项：

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

库存状态管理

通过方法判断规格是否可选：

vue商品多规格实现

methods: {
  isSpecAvailable(specIndex, value) {
    const tempSelected = [...this.selectedSpecs]
    tempSelected[specIndex] = value
    return this.skus.some(sku =>
      sku.specs.every((spec, i) =>
        !tempSelected[i] || tempSelected[i] === spec
      )
    )
  }
}

完整选择逻辑

当用户选择规格时更新状态：

data() {
  return {
    selectedSpecs: Array(specs.length).fill(null)
  }
},
methods: {
  selectSpec(index, value) {
    if (this.selectedSpecs[index] === value) {
      this.$set(this.selectedSpecs, index, null)
    } else {
      this.$set(this.selectedSpecs, index, value)
    }
  }
}

价格与库存显示

根据最终选择的规格显示对应信息：

computed: {
  currentSku() {
    return this.skus.find(sku => 
      sku.specs.every((spec, index) => 
        spec === this.selectedSpecs[index]
      )
    )
  }
}