当前位置：首页 > VUE

vue实现sku表格

2026-03-09 01:54:53VUE

Vue实现SKU表格的方法

SKU（Stock Keeping Unit）表格常用于电商商品规格组合展示。以下是基于Vue的实现方案：

数据结构设计

采用嵌套数组结构存储规格和组合：

data() {
  return {
    specs: [
      { name: '颜色', values: ['红色', '蓝色'] },
      { name: '尺寸', values: ['S', 'M', 'L'] }
    ],
    skus: [
      { id: 1, specs: ['红色', 'S'], price: 100, stock: 10 },
      { id: 2, specs: ['红色', 'M'], price: 120, stock: 5 }
    ]
  }
}

动态渲染规格选择

使用v-for循环渲染规格选项：

vue实现sku表格

<div v-for="(spec, index) in specs" :key="index">
  <h3>{{ spec.name }}</h3>
  <button 
    v-for="(value, i) in spec.values" 
    :key="i"
    @click="selectSpec(index, i)"
  >
    {{ value }}
  </button>
</div>

生成SKU组合

通过递归或笛卡尔积算法生成所有可能组合：

generateCombinations() {
  return this.specs.reduce((acc, spec) => {
    if (!acc.length) return spec.values.map(v => [v])
    return acc.flatMap(combo => 
      spec.values.map(v => [...combo, v])
    )
  }, [])
}

表格渲染实现

使用嵌套v-for渲染SKU表格：

vue实现sku表格

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

状态联动处理

实现规格选择与SKU的联动：

selectSpec(specIndex, valueIndex) {
  const selected = this.specs[specIndex].values[valueIndex]
  this.selectedSpecs[specIndex] = selected
  this.updateAvailableSkus()
}

性能优化建议

对于大量SKU的情况：

使用虚拟滚动（vue-virtual-scroller）
分页加载数据
添加防抖处理输入变更
考虑Web Worker处理复杂计算

完整组件示例

export default {
  data() {
    return {
      selectedSpecs: [],
      availableSkus: []
    }
  },
  computed: {
    allCombinations() {
      // 生成所有规格组合
    }
  },
  methods: {
    isSkuAvailable(sku) {
      return sku.specs.every((spec, i) => 
        !this.selectedSpecs[i] || this.selectedSpecs[i] === spec
      )
    }
  }
}

以上方案可根据实际需求调整，关键点在于合理的数据结构设计和状态管理。对于更复杂场景，建议使用Vuex或Pinia管理SKU状态。