前段时间公司要做“加货”的业务模块，这是电商业务的一个难点。

给我印象最深的不是商品、相关商品、相关物品的组合，而是SKU的组合。

这个问题特别有意思。当时组合虽然总体成功，但是总有一些小bug解决不了，然后手里还有其他任务，所以没有仔细研究。

后来过了一个月，我利用空闲时间研究了一下，终于解决了问题。有必要记录下这段经历。

先看业务中的效果(tips:看不清楚可以放大浏览器)

这个比较麻烦，也涉及到下面的“属性图片”循环，但重点还是在SKU组合的代码上

以下是基于element-ui和vue的简化演示代码：

html:

DivSKU组合demo/divdiv v-for='(v，I)在列表' : key=' I ' class=' mt-20 ' { v . name } }:El-checkbox-group v-model='核对表[i]。列表' el-checkbox v-for='(k，J)in v . list ' : key=' J ' : label=' k '/El-checkbox-group/div class=' mt-20 ' El-button type=' primary ' @ click=' handleclick ' OK/El-button/div class=' mt-20 ' El-tag v-for='(item，index)' in skuList ' 3360 key=' index ' style=' margin :10 px{{ item }}/el-tag/divcss:mt-20 { margin-top : 20px；}JS:

script export default { data(){ return { list :[{ name : ' size }，list3360 ['s '，' m '，' l '，' XL '，' xxl']}，{name:' color '，list3360 [ Yellow '，' blue '，' pink '，'紫色']}，{name:' pattern '，list: ['cat '，' person '，'飞机'，' lightning '，' letter ' }]，checklist :[{ name 3:]{ namethis . SKU array=[]this . SKU list=[]//将所选规范组合成一个大数组[[1，2]，[a，b].]this . checklist . foreach(element={ element . list . length 0？这个。skuarray。push(元素。list): ' ' })//方法if (this。skuarray.length0) {this。getskudata ([]，0，This。skuarray)} else {this。$ message.error('请先检查规范')}}，//递归获取每个SKU getskudata (skuarr=[]，I，list){ for(let j=0；j清单[i]。长度；如果我列出来。length-1){ SKU arr[I]=list[I][j]this . getsku data(SKU arr，I 1，list)//递归循环} else {this.skulist.push ([.skuarr，列表[I] [

只要你是电商合作伙伴，就应该会遇到这个SKU组合的问题。希望对大家有帮助！

摘要

以上就是基于边肖介绍的Vue实现电商SKU组合算法的问题。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！