基于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 相关文章推荐
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
Jul 11 Javascript
Javascript事件热键兼容ie|firefox
Dec 30 Javascript
javascript 实现简单的table排序及table操作练习
Dec 28 Javascript
Javascript实现页面跳转的几种方式分享
Oct 26 Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
TypeScript 中接口详解
Jun 19 Javascript
jQuery基于正则表达式的表单验证功能示例
Jan 21 Javascript
分分钟玩转Vue.js组件(二)
Mar 01 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
Apr 28 Javascript
vue监听scroll的坑的解决方法
Sep 07 Javascript
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
JS实现马赛克图片效果完整示例
Apr 13 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
php下关于中英数字混排的字符串分割问题
2010/04/06 PHP
PHP生成UTF8文件的方法
2010/05/15 PHP
PHP编码规范之注释和文件结构说明
2010/07/09 PHP
php数组键值用法实例分析
2015/02/27 PHP
php图片添加文字水印实现代码
2016/03/15 PHP
激活 ActiveX 控件
2006/10/09 Javascript
三级下拉菜单的js实现代码
2011/05/23 Javascript
浅谈Javascript事件模拟
2012/06/27 Javascript
JQUERY对单选框(radio)操作的小例子
2013/04/25 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
javascript字符串替换及字符串分割示例代码
2013/12/12 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
2015/03/24 Javascript
javaScript中Math()函数注意事项
2015/06/18 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
2016/12/13 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
JS实现可用滑块滑动的缓动图代码
2019/09/01 Javascript
python学习数据结构实例代码
2015/05/11 Python
Python基础之getpass模块详细介绍
2017/08/10 Python
python 解压pkl文件的方法
2018/10/25 Python
python微元法计算函数曲线长度的方法
2018/11/08 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
哈萨克斯坦最大的时装、鞋子和配饰在线商店:Lamoda.kz
2019/11/19 全球购物
学生手册家长评语
2014/02/10 职场文书
党支部公开承诺书
2014/03/28 职场文书
求职意向书
2014/04/01 职场文书
群众路线教育查摆剖析材料
2014/10/10 职场文书
2014年社区工会工作总结
2014/12/18 职场文书
2015年社区关工委工作总结
2015/04/03 职场文书
关于开学的感想
2015/08/10 职场文书
python如何正确使用yield
2021/05/21 Python
mysql使用instr达到in(字符串)的效果
2022/04/03 MySQL