vue通过笛卡儿积实现sku库存配置方式

 更新时间:2023年04月19日 10:36:46   作者:浅巷陌漓  
这篇文章主要介绍了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", "小"]

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 详解Vue Cli浏览器兼容性实践

    详解Vue Cli浏览器兼容性实践

    这篇文章主要介绍了详解Vue Cli浏览器兼容性实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • Vue3实现简约型侧边栏的示例代码

    Vue3实现简约型侧边栏的示例代码

    本文主要介绍了Vue3实现简约型侧边栏的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • Vite中自制mock服务器(不使用第三方服务)

    Vite中自制mock服务器(不使用第三方服务)

    本文主要介绍了Vite中自制mock服务器,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • vue中的事件绑定举例详解

    vue中的事件绑定举例详解

    这篇文章主要给大家介绍了关于vue中事件绑定的相关资料,事件绑定在Web开发中非常常见,我们经常需要在页面中为某个DOM元素绑定事件,如点击、鼠标移动、键盘敲击等等,需要的朋友可以参考下
    2023-09-09
  • 前端实现不同角色登入展示不同页面效果实例

    前端实现不同角色登入展示不同页面效果实例

    要实现不同角色登录跳转不同的前端页面,可以在登录成功后,根据用户的角色信息,使用路由跳转到不同的页面,这篇文章主要给大家介绍了关于前端实现不同角色登入展示不同页面效果的相关资料,需要的朋友可以参考下
    2024-08-08
  • 详解Vue组件之间通信的七种方式

    详解Vue组件之间通信的七种方式

    这篇文章主要介绍了Vue组件之间通信的七种方式,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • 在vue中实现日历功能的代码示例

    在vue中实现日历功能的代码示例

    在许多Web应用程序中,日历是一个常见的组件,它通常用于显示日期、安排会议、查看活动等,在Vue中,我们可以使用第三方库来轻松实现日历功能,也可以手动编写代码来实现日历的展示和操作,本文将介绍如何使用vue-calendar和手动编写代码来实现日历功能
    2023-07-07
  • 浅谈vue的生命周期

    浅谈vue的生命周期

    这篇文章主要为大家介绍了vue的生命周期,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-01-01
  • vue动态添加路由addRoutes之不能将动态路由存入缓存的解决

    vue动态添加路由addRoutes之不能将动态路由存入缓存的解决

    这篇文章主要介绍了vue动态添加路由addRoutes之不能将动态路由存入缓存的解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • VUE + UEditor 单图片跨域上传功能的实现方法

    VUE + UEditor 单图片跨域上传功能的实现方法

    这篇文章主要介绍了VUE + UEditor 单图片跨域上传功能的实现方法,需要的朋友参考下
    2018-02-02

最新评论