基于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 相关文章推荐
文本框只能选择数据到文本框禁止手动输入
Nov 22 Javascript
js将控件隐藏及display属性的使用介绍
Dec 30 Javascript
node.js中的fs.lchown方法使用说明
Dec 16 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
Jan 30 Javascript
jQuery+Ajax实现无刷新分页
Oct 30 Javascript
基于javascript实现checkbox复选框实例代码
Jan 28 Javascript
jQuery ready()和onload的加载耗时分析
Sep 08 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
JavaScript获取当前时间向前推三个月的方法示例
Feb 04 Javascript
浅谈JavaScript正则表达式-非捕获性分组
Mar 08 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
Mar 01 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
Apr 24 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
做一个有下拉功能的留言版
2006/10/09 PHP
PHP 引用文件技巧
2010/03/02 PHP
CI框架Session.php源码分析
2014/11/03 PHP
自制PHP框架之模型与数据库
2017/05/07 PHP
PHP数据库编程之MySQL优化策略概述
2017/08/16 PHP
详解cookie验证的php应用的一种SSO解决办法
2017/10/20 PHP
Prototype使用指南之range.js
2007/01/10 Javascript
JavaScript DOM 学习第五章 表单简介
2010/02/19 Javascript
浅谈Javascript嵌套函数及闭包
2010/11/09 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
2013/02/18 Javascript
javascript弹出层输入框(示例代码)
2013/12/11 Javascript
给应用部分的js代码设定一个统一的入口
2014/06/15 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
2014/09/01 Javascript
再谈javascript原型继承
2014/11/10 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
2016/01/08 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
2016/09/26 Javascript
微信小程序 密码输入(源码下载)
2017/06/27 Javascript
浅谈vue父子组件怎么传值
2018/07/21 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
2019/07/16 jQuery
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
python3序列化与反序列化用法实例
2015/05/26 Python
Python使用自带的ConfigParser模块读写ini配置文件
2016/06/26 Python
python实现textrank关键词提取
2018/06/22 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
Django实现CAS+OAuth2的方法示例
2019/10/30 Python
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
洗发露广告词
2014/03/14 职场文书
公司授权委托书
2014/04/04 职场文书
期中考试反思800字
2014/05/01 职场文书
高中国旗下的演讲稿
2014/08/28 职场文书
安全生产先进个人总结
2015/02/15 职场文书
2016国庆促销广告语
2016/01/28 职场文书
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技