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条
[ [ { } ,{ } ] , [ { } ] ] 变成 [ [ { } ,{ } ] , [ { } ,{ } ] ]