当前位置：首页 > VUE

vue sku 实现

2026-01-08 03:09:11VUE

Vue SKU 实现方案

在电商系统中，SKU（Stock Keeping Unit）是商品的最小库存单位，通常由多个属性组合而成（如颜色、尺寸等）。以下是基于 Vue 的实现方案。

数据结构设计

SKU 的核心是属性组合与库存的映射关系。通常需要以下数据结构：

商品属性（规格）：
每个属性包含名称（如“颜色”）和可选值（如“红色”、“蓝色”）。
```
specs: [
  { name: '颜色', values: ['红色', '蓝色'] },
  { name: '尺寸', values: ['S', 'M'] }
]
```

SKU 列表：
每个 SKU 是属性值的组合及其对应库存、价格等信息。

skus: [
  { attrs: ['红色', 'S'], stock: 10, price: 100 },
  { attrs: ['蓝色', 'M'], stock: 5, price: 120 }
]

核心功能实现

属性选择交互

通过用户选择的属性组合，动态匹配可选的 SKU。

vue sku 实现

选中状态管理：
使用 selectedSpecs 记录用户当前选择的属性值。

data() {
  return {
    selectedSpecs: {} // 如 { '颜色': '红色', '尺寸': 'S' }
  }
}

禁用不可选属性：
根据已选属性，计算其他属性的可选状态。例如，选择“红色”后，若不存在“红色+M”的 SKU，则“M”应禁用。
```
computed: {
  disabledSpecs() {
    // 实现逻辑：遍历未选属性，检查剩余属性组合是否存在有效 SKU
  }
}
```

SKU 匹配逻辑

通过用户选择的属性组合，匹配对应的 SKU 信息。

vue sku 实现

computed: {
  matchedSku() {
    const selectedValues = Object.values(this.selectedSpecs);
    return this.skus.find(sku => 
      sku.attrs.every((val, index) => val === selectedValues[index])
    );
  }
}

完整组件示例

以下是一个简化版的 Vue SKU 组件实现：

<template>
  <div>
    <!-- 渲染属性选择 -->
    <div v-for="spec in specs" :key="spec.name">
      <h3>{{ spec.name }}</h3>
      <button
        v-for="value in spec.values"
        :key="value"
        :disabled="isDisabled(spec.name, value)"
        @click="selectSpec(spec.name, value)"
      >
        {{ value }}
      </button>
    </div>

    <!-- 显示匹配的 SKU 信息 -->
    <div v-if="matchedSku">
      价格：{{ matchedSku.price }} 库存：{{ matchedSku.stock }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      specs: [
        { name: '颜色', values: ['红色', '蓝色'] },
        { name: '尺寸', values: ['S', 'M'] }
      ],
      skus: [
        { attrs: ['红色', 'S'], stock: 10, price: 100 },
        { attrs: ['蓝色', 'M'], stock: 5, price: 120 }
      ],
      selectedSpecs: {}
    };
  },
  computed: {
    matchedSku() {
      const selectedValues = Object.values(this.selectedSpecs);
      return this.skus.find(sku => 
        sku.attrs.every((val, index) => val === selectedValues[index])
      );
    }
  },
  methods: {
    selectSpec(name, value) {
      this.$set(this.selectedSpecs, name, value);
    },
    isDisabled(name, value) {
      // 实现禁用逻辑：检查当前选择是否导致无有效 SKU
    }
  }
};
</script>