当前位置：首页 > VUE

vue element 实现商品sku

2026-01-20 15:42:15VUE

商品SKU实现方法

在Vue和Element UI中实现商品SKU功能，可以通过以下步骤完成：

数据结构设计

商品SKU通常需要处理多个属性组合，每个属性有不同的选项。数据结构可以设计为：

data() {
  return {
    skuData: {
      attributes: [
        { name: '颜色', items: ['红色', '蓝色', '绿色'] },
        { name: '尺寸', items: ['S', 'M', 'L'] }
      ],
      skus: []
    }
  }
}

属性选择组件

使用Element UI的Checkbox或Radio组件实现属性选择：

<el-form-item v-for="attr in skuData.attributes" :key="attr.name" :label="attr.name">
  <el-checkbox-group v-model="selectedAttrs[attr.name]">
    <el-checkbox v-for="item in attr.items" :key="item" :label="item"></el-checkbox>
  </el-checkbox-group>
</el-form-item>

SKU表格生成

根据选择的属性组合生成SKU表格：

generateSkus() {
  const selected = Object.values(this.selectedAttrs).filter(arr => arr.length > 0)
  if (selected.length === 0) return

  const combinations = this.cartesianProduct(...selected)
  this.skuData.skus = combinations.map(comb => ({
    combination: comb.join(','),
    price: 0,
    stock: 0
  }))
}

cartesianProduct(...arrays) {
  return arrays.reduce((a, b) => 
    a.flatMap(d => b.map(e => [...d, e])), [[]])
}

SKU表格渲染

使用Element UI的Table组件展示SKU组合：

<el-table :data="skuData.skus">
  <el-table-column prop="combination" label="规格组合"></el-table-column>
  <el-table-column label="价格">
    <template #default="{row}">
      <el-input-number v-model="row.price" :min="0"></el-input-number>
    </template>
  </el-table-column>
  <el-table-column label="库存">
    <template #default="{row}">
      <el-input-number v-model="row.stock" :min="0"></el-input-number>
    </template>
  </el-table-column>
</el-table>

完整示例代码

<template>
  <div>
    <el-form>
      <el-form-item v-for="attr in skuData.attributes" :key="attr.name" :label="attr.name">
        <el-checkbox-group v-model="selectedAttrs[attr.name]">
          <el-checkbox v-for="item in attr.items" :key="item" :label="item"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-button @click="generateSkus">生成SKU</el-button>
    </el-form>

    <el-table :data="skuData.skus" v-if="skuData.skus.length > 0">
      <el-table-column prop="combination" label="规格组合"></el-table-column>
      <el-table-column label="价格">
        <template #default="{row}">
          <el-input-number v-model="row.price" :min="0"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="库存">
        <template #default="{row}">
          <el-input-number v-model="row.stock" :min="0"></el-input-number>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      skuData: {
        attributes: [
          { name: '颜色', items: ['红色', '蓝色', '绿色'] },
          { name: '尺寸', items: ['S', 'M', 'L'] }
        ],
        skus: []
      },
      selectedAttrs: {}
    }
  },
  methods: {
    generateSkus() {
      const selected = Object.values(this.selectedAttrs).filter(arr => arr.length > 0)
      if (selected.length === 0) return

      const combinations = this.cartesianProduct(...selected)
      this.skuData.skus = combinations.map(comb => ({
        combination: comb.join(','),
        price: 0,
        stock: 0
      }))
    },
    cartesianProduct(...arrays) {
      return arrays.reduce((a, b) => 
        a.flatMap(d => b.map(e => [...d, e])), [[]])
    }
  }
}
</script>