vue实现sku组合
Vue实现SKU组合的方法
SKU（Stock Keeping Unit）是商品库存管理的基本单位，通常由多个属性组合而成。在电商系统中，实现SKU组合可以帮助用户选择商品的不同属性组合，并实时显示库存状态。
数据结构设计
需要准备商品属性和SKU库存数据。属性通常以数组形式存储，每个属性包含多个可选值。SKU库存数据则包含所有可能的属性组合及其库存信息。
data() {
return {
attributes: [
{ name: '颜色', values: ['红色', '蓝色', '绿色'] },
{ name: '尺寸', values: ['S', 'M', 'L'] }
],
skus: [
{ color: '红色', size: 'S', stock: 10 },
{ color: '红色', size: 'M', stock: 5 },
{ color: '蓝色', size: 'L', stock: 8 }
],
selected: {}
}
}属性选择处理
为每个属性创建选择方法，更新当前选中的属性值。使用Vue的响应式特性自动更新界面。
methods: {
selectAttribute(attrName, value) {
this.$set(this.selected, attrName, value)
this.checkAvailability()
}
}可用性检查
根据当前选中的属性组合，检查哪些属性值是可选的。禁用无库存的属性组合，提升用户体验。
methods: {
checkAvailability() {
this.attributes.forEach(attr => {
attr.values.forEach(value => {
const tempSelected = { ...this.selected, [attr.name]: value }
const isAvailable = this.skus.some(sku =>
Object.keys(tempSelected).every(key => sku[key] === tempSelected[key])
)
// 更新属性值的可用状态
})
})
}
}库存显示
计算当前选中组合的库存量，实时显示给用户。使用计算属性自动响应选择变化。
computed: {
currentStock() {
const found = this.skus.find(sku =>
Object.keys(this.selected).every(key => sku[key] === this.selected[key])
)
return found ? found.stock : 0
}
}界面渲染
使用v-for循环渲染属性列表，绑定选择事件和禁用状态。根据业务需求调整样式和交互细节。
<div v-for="attr in attributes" :key="attr.name">
<h3>{{attr.name}}</h3>
<button
v-for="value in attr.values"
:key="value"
@click="selectAttribute(attr.name, value)"
:class="{ active: selected[attr.name] === value }"
:disabled="!isAvailable(attr.name, value)"
>
{{value}}
</button>
</div>
<p>当前库存: {{currentStock}}</p>注意事项
- 性能优化：当属性较多时，可用性检查可能影响性能，考虑使用缓存或更高效的算法
- 数据一致性：确保SKU数据包含所有可能的属性组合
- 用户体验：清晰的视觉反馈对于用户理解当前选择状态非常重要
- 移动端适配：在小屏幕上可能需要调整交互方式
这种方法可以灵活扩展，支持更多属性和更复杂的业务逻辑，是电商系统中常见的SKU实现方案。
