当前位置：首页 > VUE

vue实现sku表格

2026-01-16 20:56:55VUE

Vue实现SKU表格的方法

SKU（Stock Keeping Unit）表格常用于电商平台展示商品的多属性组合，例如颜色、尺寸等。以下是基于Vue的实现方法：

数据结构设计

SKU的核心是属性组合，需先设计合理的数据结构：

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

生成所有可能的SKU组合

使用递归或循环生成所有属性组合：

vue实现sku表格

methods: {
  generateSKUs() {
    this.skus = this.cartesianProduct(
      ...this.attributes.map(attr => attr.values)
    ).map(comb => ({
      combination: comb,
      price: 0,
      stock: 0
    }))
  },
  cartesianProduct(...a) {
    return a.reduce((a, b) => 
      a.flatMap(d => b.map(e => [d, e].flat()))
    , [[]])
  }
}

表格渲染实现

使用动态表格渲染SKU组合：

<template>
  <table>
    <thead>
      <tr>
        <th v-for="attr in attributes" :key="attr.name">
          {{ attr.name }}
        </th>
        <th>价格</th>
        <th>库存</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(sku, index) in skus" :key="index">
        <td v-for="(value, i) in sku.combination" :key="i">
          {{ value }}
        </td>
        <td>
          <input v-model.number="sku.price" type="number">
        </td>
        <td>
          <input v-model.number="sku.stock" type="number">
        </td>
      </tr>
    </tbody>
  </table>
</template>

性能优化建议

当属性较多时，SKU组合会指数级增长，可采用以下优化方案：

vue实现sku表格

虚拟滚动：只渲染可视区域内的行

<template>
<virtual-list :size="40" :remain="20">
 <!-- SKU行内容 -->
</virtual-list>
</template>

分页加载：将SKU数据分页处理

paginatedSKUs() {
return this.skus.slice(
 (this.currentPage - 1) * this.pageSize,
 this.currentPage * this.pageSize
)
}

懒生成：只在需要时生成特定SKU组合

完整组件示例

<template>
  <div>
    <button @click="generateSKUs">生成SKU</button>
    <table v-if="skus.length">
      <!-- 表头 -->
      <thead>...</thead>
      <!-- 表体 -->
      <tbody>...</tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      attributes: [...],
      skus: []
    }
  },
  methods: {
    generateSKUs() {
      // 生成逻辑
    },
    cartesianProduct() {
      // 笛卡尔积计算
    }
  }
}
</script>