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

 更新时间:2019年05月29日 10:46:38   作者:ykCoder  
这篇文章主要介绍了基于Vue实现电商SKU组合算法问题 ,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

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

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

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

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

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

这个相对来说比较麻烦,还涉及到了下面“属性图片”的循环,但关键点还是在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>

效果如下:

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

总结

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

相关文章

  • vue3.0中使用element UI表单遍历校验问题解决

    vue3.0中使用element UI表单遍历校验问题解决

    本文主要介绍了vue3.0中使用element UI表单遍历校验问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • 使用Vue实现简单日历效果

    使用Vue实现简单日历效果

    这篇文章主要为大家详细介绍了使用Vue实现简单日历效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • vue后台管理之动态加载路由的方法

    vue后台管理之动态加载路由的方法

    这篇文章主要介绍了vue后台管理之动态加载路由的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 详解elementui之el-image-viewer(图片查看器)

    详解elementui之el-image-viewer(图片查看器)

    这篇文章主要介绍了详解elementui之el-image-viewer(图片查看器),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • 优化Vue项目编译文件大小的方法步骤

    优化Vue项目编译文件大小的方法步骤

    这篇文章主要介绍了优化Vue项目编译文件大小的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • Vue3 setup添加name的方法步骤

    Vue3 setup添加name的方法步骤

    如果你在 vue3 开发中使用了语法的话,对于组件的name属性,需要做一番额外的处理,下面这篇文章主要给大家介绍了关于Vue3 setup添加name的相关资料,需要的朋友可以参考下
    2022-11-11
  • Vue打包后访问静态资源路径问题

    Vue打包后访问静态资源路径问题

    在本篇文章里小编给各位整理的是关于Vue打包后访问静态资源路径问题相关知识点,需要的朋友们学习下。
    2019-11-11
  • vue2+element-ui使用vue-i18n进行国际化的多语言/国际化详细教程

    vue2+element-ui使用vue-i18n进行国际化的多语言/国际化详细教程

    这篇文章主要给大家介绍了关于vue2+element-ui使用vue-i18n进行国际化的多语言/国际化的相关资料,I18n是Vue.js的国际化插件,项目里面的中英文等多语言切换会使用到这个东西,需要的朋友可以参考下
    2023-12-12
  • petite vue的使用示例详解

    petite vue的使用示例详解

    这篇文章主要为大家介绍了petite vue的使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • Vue实现Header渐隐渐现效果的实例代码

    Vue实现Header渐隐渐现效果的实例代码

    这篇文章主要介绍了Vue实现Header渐隐渐现效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-11-11

最新评论