vue通过笛卡儿积实现sku库存配置方式
vue通过笛卡儿积实现sku库存配置
目标
通过页面上渲染出来的动态属性 实现sku库存配置
将已选择的所有属性,通过笛卡儿积实现sku库存配置
以两个属性为例子,举例说明:
1x1:
白色
S
结合之后就是
[白色,S]
this.selectCheckArr=[ [ { "attrId": 0, "attrName": "颜色", "attrValueId": 00, "attrValueName": "白色" } ], [ { "attrId": 1, "attrName": "大小", "attrValueId": 11, "attrValueName": "S" } ] ] this.selectCheckArr = this.getProducts(this.selectCheckArr) console.log(this.selectCheckArr) /** 输出:[ [ { "attrId": 0, "attrName": "颜色", "attrValueId": 00, "attrValueName": "白色" }, { "attrId": 1, "attrName": "大小", "attrValueId": 11, "attrValueName": "S" } ] ] **/
1x2
白色 黄色
S
结合之后就是
[白色,S ],[黄色,S ]
this.selectCheckArr=[ [ { "attrId": 0, "attrName": "颜色", "attrValueId": 00, "attrValueName": "白色" }, { "attrId": 0, "attrName": "颜色", "attrValueId": 01, "attrValueName": "黄色" } ], [ { "attrId": 1, "attrName": "大小", "attrValueId": 11, "attrValueName": "S" } ] ] this.selectCheckArr = this.getProducts(this.selectCheckArr) console.log(this.selectCheckArr) /** 输出: [ [ { "attrId": 0, "attrName": "颜色", "attrValueId": 00, "attrValueName": "白色" }, { "attrId": 1, "attrName": "大小", "attrValueId": 11, "attrValueName": "S" } ], [ { "attrId": 0, "attrName": "颜色", "attrValueId": 01, "attrValueName": "黄色" }, { "attrId": 1, "attrName": "大小", "attrValueId": 11, "attrValueName": "S" } ] ] **/
2x2
白 黄
S M
结合之后就是
[白色,S ],[白色,M ],[黄色,S ],[黄色,M ]
this.selectCheckArr= [ [ { "attrId": 0, "attrName": "颜色", "attrValueId": 00, "attrValueName": "白色" }, { "attrId": 0, "attrName": "颜色", "attrValueId": 01, "attrValueName": "黄色" } ], [ { "attrId": 1, "attrName": "大小", "attrValueId": 11, "attrValueName": "S" }, { "attrId": 1, "attrName": "大小", "attrValueId": 12, "attrValueName": "M" } ] ] this.selectCheckArr = this.getProducts(this.selectCheckArr) console.log(this.selectCheckArr) /** 输出: [ [ { "attrId": 0, "attrName": "颜色", "attrValueId": 00, "attrValueName": "白色" }, { "attrId": 1, "attrName": "大小", "attrValueId": 11, "attrValueName": "S" } ], [ { "attrId": 0, "attrName": "颜色", "attrValueId": 00, "attrValueName": "白色" }, { "attrId": 1, "attrName": "大小", "attrValueId": 12, "attrValueName": "M" } ], [ { "attrId": 0, "attrName": "颜色", "attrValueId": 01, "attrValueName": "黄色" }, { "attrId": 1, "attrName": "大小", "attrValueId": 11, "attrValueName": "S" } ], [ { "attrId": 0, "attrName": "颜色", "attrValueId": 01, "attrValueName": "黄色" }, { "attrId": 1, "attrName": "大小", "attrValueId": 12, "attrValueName": "M" } ] ] **/
笛卡儿积方法
// 笛卡儿积 getProducts(specs) { if (!specs || specs.length == 0) { return []; } else { return joinSpec([ [] ], specs, 0, specs.length - 1); } function joinSpec(prevProducts, specs, i, max) { var currentProducts = [], currentProduct, currentSpecs = specs[i]; if (i > max) { return prevProducts; } prevProducts.forEach(function (prevProduct) { currentSpecs.forEach(function (spec) { currentProduct = prevProduct.slice(0); currentProduct.push(spec); currentProducts.push(currentProduct); }); }); return joinSpec(currentProducts, specs, ++i, max); } },
注意
this.getProducts()的入参,需与博主保持一致(数组对象),否则会有问题哦~
如果是1x1 ,就是总共生成1条
[ [ { } ] , [ { } ] ],变成 [ [ { } , { } ] ]
如果是2x1 ,就是总共生成2条
[ [ { } ,{ } ] , [ { } ] ] 变成 [ [ { } ,{ } ] , [ { } ,{ } ] ]
笛卡尔积生成商品SKU组合
var arr = [ ['黑色', '白色', '蓝色'], ['8GB', '16GB', '32GB'], ['大', '中', '小'] ]; /** * 生成笛卡尔积 * @returns {*} */ function descartes(array) { if (array.length < 2) return array[0] || []; return [].reduce.call(array, function (col, set) { var res = []; col.forEach(function (c) { set.forEach(function (s) { var t = [].concat(Array.isArray(c) ? c : [c]); t.push(s); res.push(t); }) }); return res; }); } console.log(descartes(arr));
该方法用于根据商品规格属性生成商品SKU组合,以上为javascript代码
执行结果如下:
0: ["黑色", "8GB", "大"]
1: ["黑色", "8GB", "中"]
2: ["黑色", "8GB", "小"]
3: ["黑色", "16GB", "大"]
4: ["黑色", "16GB", "中"]
5: ["黑色", "16GB", "小"]
6: ["黑色", "32GB", "大"]
7: ["黑色", "32GB", "中"]
8: ["黑色", "32GB", "小"]
9: ["白色", "8GB", "大"]
10: ["白色", "8GB", "中"]
11: ["白色", "8GB", "小"]
12: ["白色", "16GB", "大"]
13: ["白色", "16GB", "中"]
14: ["白色", "16GB", "小"]
15: ["白色", "32GB", "大"]
16: ["白色", "32GB", "中"]
17: ["白色", "32GB", "小"]
18: ["蓝色", "8GB", "大"]
19: ["蓝色", "8GB", "中"]
20: ["蓝色", "8GB", "小"]
21: ["蓝色", "16GB", "大"]
22: ["蓝色", "16GB", "中"]
23: ["蓝色", "16GB", "小"]
24: ["蓝色", "32GB", "大"]
25: ["蓝色", "32GB", "中"]
26: ["蓝色", "32GB", "小"]
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Vite+TS+Vue开启eslint和prettier规范及校验方式
这篇文章主要介绍了Vite+TS+Vue开启eslint和prettier规范及校验方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-06-06vue 路由子组件created和mounted不起作用的解决方法
今天小编就为大家分享一篇vue 路由子组件created和mounted不起作用的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
最新评论