当前位置：首页 > VUE

vue实现sku添加

2026-02-19 01:22:53VUE

Vue 实现 SKU 添加的方法

SKU（Stock Keeping Unit）是库存管理中的基本单位，通常用于电商平台管理商品属性组合。以下是基于 Vue 实现 SKU 添加的详细方法。

数据模型设计

定义商品规格（如颜色、尺寸）和 SKU 组合的数据结构：

data() {
  return {
    specs: [
      { name: '颜色', values: ['红色', '蓝色'] },
      { name: '尺寸', values: ['S', 'M'] }
    ],
    skus: [] // 生成的 SKU 组合
  }
}

生成 SKU 组合

使用递归或笛卡尔积算法生成所有可能的规格组合：

methods: {
  generateSkus() {
    this.skus = this.cartesianProduct(this.specs.map(spec => spec.values))
      .map(combinations => ({
        attributes: combinations.join(','),
        price: 0,
        stock: 0
      }))
  },

  cartesianProduct(arr) {
    return arr.reduce((a, b) =>
      a.flatMap(x => b.map(y => [...x, y])),
      [[]]
    )
  }
}

动态表单渲染

基于生成的 SKU 组合渲染输入表单：

<template>
  <div v-for="(sku, index) in skus" :key="index">
    <h4>{{ sku.attributes }}</h4>
    <input v-model.number="sku.price" type="number" placeholder="价格">
    <input v-model.number="sku.stock" type="number" placeholder="库存">
  </div>
</template>

规格动态管理

添加方法允许动态增删规格：

vue实现sku添加

methods: {
  addSpec() {
    this.specs.push({ name: '', values: [] })
  },

  removeSpec(index) {
    this.specs.splice(index, 1)
    this.generateSkus()
  },

  addSpecValue(specIndex) {
    this.specs[specIndex].values.push('')
    this.generateSkus()
  }
}

数据验证与提交

在提交前验证 SKU 数据的完整性：

methods: {
  validateSkus() {
    return this.skus.every(sku => 
      sku.price > 0 && sku.stock >= 0
    )
  },

  submitSkus() {
    if (!this.validateSkus()) {
      alert('请填写完整的SKU信息')
      return
    }
    // 提交逻辑
  }
}

性能优化建议

对于大量规格组合的情况，考虑以下优化：

采用懒加载方式生成 SKU，仅在需要时计算

vue实现sku添加

添加防抖处理规格变更时的 SKU 生成操作

使用虚拟滚动技术渲染大量 SKU 表单项

完整组件示例

整合上述功能的完整组件示例：

<template>
  <div>
    <div v-for="(spec, sIndex) in specs" :key="sIndex">
      <input v-model="spec.name" placeholder="规格名">
      <button @click="removeSpec(sIndex)">删除</button>

      <div v-for="(value, vIndex) in spec.values" :key="vIndex">
        <input v-model="spec.values[vIndex]" placeholder="规格值">
      </div>
      <button @click="addSpecValue(sIndex)">添加规格值</button>
    </div>

    <button @click="addSpec">添加规格</button>
    <button @click="generateSkus">生成SKU</button>

    <div v-if="skus.length">
      <div v-for="(sku, index) in skus" :key="index">
        <h4>{{ sku.attributes }}</h4>
        <input v-model.number="sku.price" type="number" placeholder="价格">
        <input v-model.number="sku.stock" type="number" placeholder="库存">
      </div>
      <button @click="submitSkus">提交</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      specs: [
        { name: '颜色', values: ['红色', '蓝色'] },
        { name: '尺寸', values: ['S', 'M'] }
      ],
      skus: []
    }
  },
  methods: {
    // 前面定义的所有方法...
  }
}
</script>

以上实现提供了完整的 SKU 添加功能，可根据实际需求调整规格管理和 SKU 生成的逻辑。对于更复杂的场景，可以考虑使用专门的 SKU 生成库或组件。