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

vue通过笛卡儿积实现sku库存配置相关推荐

Vue 的电商 SKU 表单配置组件
下载地址Vue 的电商 SKU 表单配置组件,多条件筛选计算价格和库存. dd:
vue实现计算商品sku笛卡尔积（干活）
在 Vue 中计算商品 SKU 的笛卡尔积,您可以按照以下步骤进行: 定义商品属性和属性值在 Vue 组件中定义商品属性和属性值,可以使用对象或数组来表示: // 商品属性 const attrib ...
vue脚手架解决跨域问题-------配置反向代理
vue脚手架解决跨域问题-------配置反向代理参考文章: (1)vue脚手架解决跨域问题-------配置反向代理 (2)https://www.cnblogs.com/zbx-boke/p/9 ...
laravel + Vue 前后端分离之项目配置 - 开发环境
既然你来到查看这篇文章,那么你应该知道PHP 版本 >=7. 接着看一下目录 |-blog |-- api |-- front 目录外部很简单,,不多说了,赶紧看重点配置Laravel 作为前 ...
Vue项目开发需要准备和配置些什么环境？
Vue项目开发需要准备和配置些什么环境? 一.首先需要安装node.js 下载:安装node.js链接安装在D盘 window+R,输入cmd,打开命令提示符窗口,输入: npm -v 检测是否安装 ...
Vue环境搭建(node安装,环境配置,运行项目)
Vue环境搭建(node安装,环境配置,运行项目) 一.安装node 1.去官网下载node之后,推荐安装稳定版本(LTS)node官网下载地址 2.查看node安装成功否 node -v 查看nod ...
淘宝sku库存(sku库存200)采集
最近发现淘宝系接口内的sku库存值有变动. 通过查验APP和Web,之前在客户端显示具体库存的文案,已经从"库存:51612件",变为"库存:有货". 找到规律 ...
vue cli4 vue2 多页面打包配置与坑点
前言: 一直以来都没用上多页面打包,这次遇到个业务特殊情况,想到用多页面打包的方案来解决,于是按照vue cli 官方文档在自己的项目上配置跑了一下,果然一跑就是一堆问题.只能说事情总是比我们想象的要 ...
vue开发微信公众号可视化配置菜单
vue开发微信公众号可视化配置菜单其实一开始我也是懵逼的,我搞不懂微信公众号后台其实已经很好用了,为什么还需要开发一个模仿微信公众号后台的系统呢?而且微信公众号可以绑定多个运营者,都可以和管理员一样 ...

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

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

目标

注意

vue通过笛卡儿积实现sku库存配置相关推荐

最新文章

热门文章