颜色",val:"红色"},{name:"颜色",val:"蓝色"}....]格式 let func = function(...arrays){ console.log('arrays',arrays); return arrays.reduce((acc, curr) => { const result = []; acc.forEach(x => { curr.forEach(y => { result.push([...x, y]); }); }); return result; }, [[]]); } console.log('....',...array); let newList = func(...array) return newList } skuList = cartesianProduct() console.log('skuList',skuList); ``` ## 判断规格是否有存货在电商系统中，一般会有一个商品的 SKU 列表，每个 SKU 都代表着一种具体的产品规格和库存量。当用户选择某一个规格时，需要遍历所有可能的 SKU，找到与该规格组合匹配的 SKU，并检查该 SKU 的库存情况。如果有库存，则该规格可以被勾选；否则，该规格应该被禁用或者显示为无法选择的状态。如上 combination 表可知，当前产品有三个规格：颜色、尺码、材质。其中，颜色和尺寸和材质之间存在依赖关系，即不同的颜色对应不同的尺寸和材质。此外，每个 SKU 都会对应着特定的库存量。当用户选择颜色为红色时，需要遍历所有SKU，找到颜色为红色的SKU，并获取该SKU对应的尺寸。接下来，需要检查所有库存量大于0的SKU，看看它们中是否存在尺寸与当前选择的尺寸相同的SKU。如果存在，则该尺寸可以被勾选；否则，该尺寸应该被禁用或者显示为无法选择的状态。我们把 cartesianProduct 函数稍微改一下，加入库存 ### 判断是否有存货,加入库存 ```js import { reactive,ref } from 'vue' // 假设已经有的集中属性 const combination = reactive([ { name: '颜色', id:'color', list: ['红色', '蓝色', '绿色'] }, { name: '尺码', id:'size', list: ['S', 'M', 'L'] }, { name: '材质', id:'texture', list: ['棉质', '涤纶'] }, // { name:'品牌', id:'pinpai',list:['三星','华为','苹果','小米','XF'] } ]) let skuList = reactive([]) // 需要根据笛卡尔算法计算出各种排列组合 function cartesianProduct(){ const array = combination.map(item => item.list.map(v => { return ({ name:item.name,val:v,id:item.id }) })) console.log('array',array); const data = [] // 上述已经把当前的数据组合为[{name:"颜色",val:"红色"},{name:"颜色",val:"蓝色"}....]格式 let func = function(...arrays){ console.log('arrays',arrays); return arrays.reduce((acc, curr) => { const result = []; acc.forEach(x => { curr.forEach(y => { result.push([...x, y]); }); }); return result; }, [[]]); } console.log('....',...array); let newList = func(...array) return newList.map(item => { const attributesValue = {} item.forEach(({id,val}) => { attributesValue[id] = val }) return { attributes:item, // { id:"color",name:"颜色",val:"红色" } attributesValue, SKU:item.map(i => i.val).join(), stock: Math.floor(Math.random() * 6), price:1001 } }) } skuList = cartesianProduct() console.log('skuList',skuList); ``` ## 页面布局 ```html ``` :::center 布局效果 ![image.png](http://admin-api.luox.online/upload/42910c875bbea19cfb2dc98769779491.png){{{width="50%" height="auto"}}} ::: ## 加入函数校验当前按钮是否可以点击如果需要实现每选中一个规格，其他依赖此规格的组合是否有存货，我们还需要添加一个函数计算是否可选在js中添加函数 checkInventory ```js // 判断当前按钮是否可以点击是否有库存 let checkIsNoStock = (id,value) => { let newAttributesValue = { ...attributesValue,[id]:value } for(const sku of skuList){ let match = true for(const [key,v] of Object.entries(newAttributesValue)) { if(v && sku.attributesValue[key] !==v) { match = false break } } if(match&&sku.stock >0){ return true } } return false } ``` ## 完整代码 ```html ``` ### 项目演示地址 [![Cloud Studio Template](https://cs-res.codehub.cn/common/assets/icon-badge.svg)](https://cloudstudio.net/a/18873203027574784?channel=share&sharetype=Markdown) - [参考文章](https://juejin.cn/post/7224671404439502905)

2025