基于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 相关文章推荐
JS的replace方法详细介绍
Nov 09 Javascript
web基于浏览器的本地存储方法应用
Nov 27 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
Feb 02 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
bootstrap table配置参数例子
Jan 05 Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 Javascript
一看就会的vuex实现登录验证(附案例)
Jan 09 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
Mar 04 Javascript
微信小程序仿抖音短视频切换效果的实例代码
Jun 24 Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 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 pathinfo()获得文件的路径、名称等信息说明
2011/09/13 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(九)
2014/06/24 PHP
codeigniter中实现一次性加载多个view的方法
2015/03/20 PHP
Smarty分页实现方法完整实例
2016/05/11 PHP
PHP中set_include_path()函数相关用法分析
2016/07/18 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
js动态给table添加/删除tr的方法
2013/08/02 Javascript
JavaScript模拟push
2016/03/06 Javascript
浅析Bootstrap缩略图组件与警示框组件
2016/04/29 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
js实现股票实时刷新数据案例
2017/05/14 Javascript
jQuery中库的引用方法
2018/01/06 jQuery
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
2018/08/10 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
简单介绍Python中的len()函数的使用
2015/04/07 Python
基于Python在MacOS上安装robotframework-ride
2018/12/28 Python
Python Tkinter模块 GUI 可视化实例
2019/11/20 Python
使用Python求解带约束的最优化问题详解
2020/02/11 Python
详解使用canvas保存网页为pdf文件支持跨域
2018/11/23 HTML / CSS
canvas 绘图时位置偏离的问题解决
2020/09/16 HTML / CSS
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
校班主任推荐信范文
2013/12/03 职场文书
个人租房协议书
2014/04/09 职场文书
好听的队名和口号
2014/06/09 职场文书
干部年终考核评语
2015/01/04 职场文书
绿色环保倡议书
2015/04/28 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
2015年大学迎新工作总结
2015/07/16 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书
CSS 实现多彩、智能的阴影效果
2021/05/12 HTML / CSS
Python如何加载模型并查看网络
2022/07/15 Python