当前位置：首页 > VUE

vue实现sku

2026-03-07 03:08:30VUE

Vue 实现 SKU 的基本思路

SKU（Stock Keeping Unit）是商品库存管理的最小单元，通常由多个属性组合而成。在 Vue 中实现 SKU 功能，需要处理属性选择、组合计算、库存校验等逻辑。

数据结构设计

商品 SKU 数据通常包含属性列表和 SKU 列表两部分：

data() {
  return {
    // 属性列表，如颜色、尺寸等
    attributes: [
      {
        name: '颜色',
        values: ['红色', '蓝色', '绿色']
      },
      {
        name: '尺寸',
        values: ['S', 'M', 'L']
      }
    ],

    // SKU 列表，包含各属性组合及库存等信息
    skus: [
      {
        id: 1,
        specs: ['红色', 'S'],
        price: 100,
        stock: 10
      },
      {
        id: 2,
        specs: ['红色', 'M'],
        price: 110,
        stock: 5
      }
      // 其他SKU组合...
    ],

    // 用户当前选择的属性
    selected: {}
  }
}

属性选择处理

实现属性选择功能，需要跟踪用户选择的属性值：

vue实现sku

methods: {
  selectAttribute(attrName, value) {
    // 使用Vue的响应式更新
    this.$set(this.selected, attrName, value)

    // 检查当前选择的SKU是否有效
    this.checkValidSku()
  }
}

SKU 有效性校验

根据用户选择的属性组合，查找匹配的SKU并检查库存：

methods: {
  checkValidSku() {
    // 获取已选择的属性值数组
    const selectedValues = Object.values(this.selected)

    // 如果选择的属性数量不足，不进行校验
    if(selectedValues.length !== this.attributes.length) return

    // 查找匹配的SKU
    const matchedSku = this.skus.find(sku => {
      return sku.specs.every(spec => selectedValues.includes(spec))
    })

    // 更新UI状态
    if(matchedSku) {
      this.validSku = matchedSku
    } else {
      this.validSku = null
    }
  }
}

禁用无库存选项

为了提高用户体验，应该禁用那些会导致无库存组合的属性选项：

vue实现sku

computed: {
  disabledOptions() {
    const disabled = {}

    // 初始化禁用对象
    this.attributes.forEach(attr => {
      disabled[attr.name] = {}
      attr.values.forEach(value => {
        disabled[attr.name][value] = false
      })
    })

    // 检查每个属性值的可用性
    this.attributes.forEach(attr => {
      attr.values.forEach(value => {
        // 临时构建选择组合
        const tempSelected = {...this.selected, [attr.name]: value}
        const selectedValues = Object.values(tempSelected)

        // 检查是否有SKU匹配这个临时组合
        const hasStock = this.skus.some(sku => {
          return sku.specs.every(spec => selectedValues.includes(spec)) && sku.stock > 0
        })

        disabled[attr.name][value] = !hasStock
      })
    })

    return disabled
  }
}

完整组件示例

结合上述逻辑的完整组件示例：

<template>
  <div class="sku-selector">
    <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="{ 
          'selected': selected[attr.name] === value,
          'disabled': disabledOptions[attr.name][value]
        }"
        :disabled="disabledOptions[attr.name][value]"
      >
        {{ value }}
      </button>
    </div>

    <div v-if="validSku" class="sku-info">
      <p>价格: {{ validSku.price }}</p>
      <p>库存: {{ validSku.stock }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      attributes: [
        { name: '颜色', values: ['红色', '蓝色', '绿色'] },
        { name: '尺寸', values: ['S', 'M', 'L'] }
      ],
      skus: [
        { id: 1, specs: ['红色', 'S'], price: 100, stock: 10 },
        { id: 2, specs: ['红色', 'M'], price: 110, stock: 5 },
        { id: 3, specs: ['蓝色', 'S'], price: 120, stock: 8 }
      ],
      selected: {},
      validSku: null
    }
  },
  computed: {
    disabledOptions() {
      // ...同上文disabledOptions计算属性
    }
  },
  methods: {
    selectAttribute(attrName, value) {
      // ...同上文selectAttribute方法
    },
    checkValidSku() {
      // ...同上文checkValidSku方法
    }
  }
}
</script>

<style>
.selected {
  background-color: #42b983;
  color: white;
}
.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>