vue通过笛卡儿积实现sku库存配置
vue通过笛卡儿积实现sku库存配置目标注意目标通过页面上渲染出来的动态属性 实现sku库存配置将已选择的所有属性,通过笛卡儿积实现sku库存配置以两个属性为例子,举例说明:1x1:白色S结合之后就是[白色,S]this.selectCheckArr=[[{"attrId": 0,"attrName": "颜色","attrValueId": 00,"at
·
目标
通过页面上渲染出来的动态属性 实现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条
[ [ { } ,{ } ] , [ { } ] ] 变成 [ [ { } ,{ } ] , [ { } ,{ } ] ]
更多推荐
已为社区贡献2条内容
所有评论(0)