vue实现sku表格
Vue 实现 SKU 表格
核心思路
SKU（Stock Keeping Unit）表格通常用于电商商品规格组合展示，需动态生成规格组合矩阵并处理用户选择逻辑。Vue 的响应式特性非常适合此类需求。
数据结构设计
data() {
return {
specs: [
{ name: '颜色', values: ['红色', '蓝色', '绿色'] },
{ name: '尺寸', values: ['S', 'M', 'L'] }
],
selected: {},
skuList: [
{ color: '红色', size: 'S', stock: 10, price: 99 },
{ color: '蓝色', size: 'M', stock: 5, price: 89 }
]
}
}规格选择处理
methods: {
handleSelect(specName, value) {
this.$set(this.selected, specName, value)
this.checkAvailable()
},
checkAvailable() {
this.specs.forEach(spec => {
spec.values.forEach(value => {
const testSelected = { ...this.selected, [spec.name]: value }
this.$set(spec, 'disabled', !this.isCombinationValid(testSelected))
})
})
},
isCombinationValid(combination) {
return this.skuList.some(sku => {
return Object.keys(combination).every(key => sku[key] === combination[key])
})
}
}表格渲染实现
<template>
<div class="sku-container">
<div v-for="spec in specs" :key="spec.name">
<h3>{{ spec.name }}</h3>
<button
v-for="value in spec.values"
:key="value"
:class="{ active: selected[spec.name] === value, disabled: spec.disabled }"
@click="handleSelect(spec.name, value)"
>
{{ value }}
</button>
</div>
<table v-if="Object.keys(selected).length > 0">
<tr>
<th v-for="spec in specs" :key="spec.name">{{ spec.name }}</th>
<th>库存</th>
<th>价格</th>
</tr>
<tr v-for="sku in matchedSkus" :key="sku.id">
<td v-for="spec in specs" :key="spec.name">{{ sku[spec.name.toLowerCase()] }}</td>
<td>{{ sku.stock }}</td>
<td>{{ sku.price }}</td>
</tr>
</table>
</div>
</template>样式优化建议
.sku-container button {
margin: 5px;
padding: 8px 12px;
border: 1px solid #ddd;
cursor: pointer;
}
.sku-container button.active {
border-color: #f00;
background: #ffecec;
}
.sku-container button.disabled {
opacity: 0.5;
cursor: not-allowed;
}
table {
margin-top: 20px;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
}完整逻辑计算
computed: {
matchedSkus() {
return this.skuList.filter(sku => {
return Object.keys(this.selected).every(key =>
sku[key.toLowerCase()] === this.selected[key]
)
})
}
}扩展功能建议
- 添加规格图片展示
- 实现多规格层级（如三级规格）
- 加入购物车按钮交互
- 价格区间计算逻辑
- 规格组合的禁用状态缓存优化
通过以上实现，可以构建一个完整的SKU选择系统。核心在于通过响应式数据驱动视图更新，利用计算属性处理组合逻辑，通过样式反馈可选状态。
