基于Vue实现电商SKU组合算法问题


Posted in Javascript onMay 29, 2019

前段时间,公司要做“添加商品”业务模块,这也算是电商业务里面的一个难点了。

令我印象最深的不是什么“组合商品”、“关联商品”、“关联单品”,而是商品SKU的组合问题。

这个问题特别有意思,当时虽然大体上组合成功,总是有些小bug解决不了,然后手上又有别的任务就没仔细研究它。

后来过了一个月,空闲下来专门研究了下,终于把问题解决,有必要记录下这次体验。

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

基于Vue实现电商SKU组合算法问题

这个相对来说比较麻烦,还涉及到了下面“属性图片”的循环,但关键点还是在SKU组合的代码上面

以下是基于element-ui和vue的精简版demo代码:

html:

<div>SKU组合demo</div>
<div v-for="(v, i) in list" :key="i" class="mt-20">
 <b>{{ v.name }}:</b>
 <el-checkbox-group v-model="checkList[i].list">
 <el-checkbox v-for="(k, j) in v.list" :key="j" :label="k" />
 </el-checkbox-group>
</div>
<div class="mt-20">
 <el-button type="primary" @click="handleClick">确定</el-button>
</div>
<div class="mt-20">
 <el-tag v-for="(item, index) in skuList" :key="index" style="margin:10px 10px;">{{ item }}</el-tag>
</div>

css:

.mt-20 {
 margin-top: 20px;
}

JS:

<script>
export default {
 data() {
 return {
  list: [
  { name: '尺码', list: ['S', 'M', 'L', 'XL', 'XXL'] },
  { name: '颜色', list: ['红色', '黄色', '蓝色', '粉色', '紫色'] },
  { name: '图案', list: ['猫咪', '人物', '飞机', '闪电', '字母'] }
  ],
  checkList: [
  { name: '尺码', list: [] },
  { name: '颜色', list: [] },
  { name: '图案', list: [] }
  ],
  skuArray: [],
  skuList: []
 }
 },
 methods: {
 handleClick() {
  // 先清空数据,保证连续点击按钮,数据不会重复
  this.skuArray = []
  this.skuList = []
  // 将选中的规格组合成一个大数组 [[1, 2], [a, b]...]
  this.checkList.forEach(element => {
  element.list.length > 0 ? this.skuArray.push(element.list) : ''
  })
  // 勾选了规格,才调用方法
  if (this.skuArray.length > 0) {
  this.getSkuData([], 0, this.skuArray)
  } else {
  this.$message.error('请先勾选规格')
  }
 },
 // 递归获取每条SKU数据
 getSkuData(skuArr = [], i, list) {
  for (let j = 0; j < list[i].length; j++) {
  if (i < list.length - 1) {
   skuArr[i] = list[i][j]
   this.getSkuData(skuArr, i + 1, list) // 递归循环
  } else {
   this.skuList.push([...skuArr, list[i][j]]) // 扩展运算符,连接两个数组
  }
  }
 }
 }
}
</script>

效果如下:

基于Vue实现电商SKU组合算法问题

 只要是做电商的小伙伴应该都会遇到这个SKU组合问题吧,希望能对大家有所帮助!

总结

以上所述是小编给大家介绍的基于Vue实现电商SKU组合算法问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript中的float运算精度实例分析
Aug 21 Javascript
De facto standard 世界上不可思议的事实标准
Aug 29 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
自己编写的类似JS的trim方法
Oct 09 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
Oct 21 Javascript
JQuery下拉框应用示例介绍
Apr 23 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
JQuery动态添加和删除表格行的方法
Mar 09 Javascript
js 函数式编程学习笔记
Mar 25 Javascript
JavaScript字符串检索字符的方法
Jun 23 Javascript
JavaScript创建对象的四种常用模式实例分析
Jan 11 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
Jun 18 Javascript
JS学习笔记之闭包小案例分析
May 29 #Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
May 29 #Javascript
elementUI select组件value值注意事项详解
May 29 #Javascript
elementUI select组件使用及注意事项详解
May 29 #Javascript
通过vue手动封装on、emit、off的代码详解
May 29 #Javascript
el-select数据过多懒加载的解决(loadmore)
May 29 #Javascript
JS学习笔记之原型链和利用原型实现继承详解
May 29 #Javascript
You might like
ThinkPHP中的三大自动简介
2014/08/22 PHP
Windows 下安装 swoole 图文教程(php)
2017/06/05 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
NodeJS url验证(url-valid)的使用方法
2013/11/18 NodeJs
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
js中日期的加减法
2015/05/06 Javascript
AngularJS基础知识笔记之表格
2015/05/10 Javascript
javascript顺序加载图片的方法
2015/07/18 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
2015/09/27 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
js生成随机数(指定范围)的实例代码
2016/07/10 Javascript
js HTML5 Canvas绘制转盘抽奖
2020/09/13 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
2017/08/16 Javascript
vue做网页开场视频的实例代码
2017/10/20 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
2018/06/22 Javascript
JS原生瀑布流效果实现
2019/04/26 Javascript
解决vuex刷新状态初始化的方法实现
2019/08/15 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
2020/06/08 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
在vscode 中设置 vue模板内容的方法
2020/09/02 Javascript
python爬取网页内容转换为PDF文件
2020/07/28 Python
Python正则表达式匹配和提取IP地址
2019/06/06 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
Python numpy数组转置与轴变换
2019/11/15 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
利用html5 file api读取本地文件示例(如图片、PDF等)
2018/03/07 HTML / CSS
集世界奢侈品和设计师品牌的意大利精品买手店:Tessabit
2019/08/17 全球购物
安全生产中长期规划实施方案
2014/02/21 职场文书
人事任命书格式
2014/06/05 职场文书
刮痧观后感
2015/06/05 职场文书
篮球赛闭幕式主持词
2015/07/03 职场文书
golang 实现对Map进行键值自定义排序
2021/04/28 Golang