SKU规格列表

商品详情添加，实现多销售属性的组合。比如添加衣服的商品详情，那么衣服的销售属性有颜色、尺寸。假如颜色有红色、白色，尺寸有S、M。那么就存在四种组合情况(红S、红M、白S、白M)

下面是vuejs中，实现这种组合方式的demo

<template>
  <div>
    规格列表
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // 规格列表
        list: [],
        // 规格属性
        attribute: [
          ['红', '绿', '蓝'],
          ['S', 'M', 'L'],
          ['长款', '短款']
        ]
      }
    },
    methods: {
      createSkuList(skuArr = [], i, attribute) {// 生成规格列表
        for (let j = 0; j < attribute[i].length; j++) {
          if (i < attribute.length - 1) {
            skuArr[i] = attribute[i][j]
            this.createSkuList(skuArr, i + 1, attribute)
          } else {
            this.list.push([...skuArr, attribute[i][j]])
          }
        }
      }
    },
    created() {
      this.createSkuList([], 0, this.attribute)
      console.log(this.list)
    }
  }
</script>

<template>
  <div>
    规格列表
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // 规格列表
        list: [],
        // 规格属性
        attribute: [
          ['红', '绿', '蓝'],
          ['S', 'M', 'L'],
          ['长款', '短款']
        ]
      }
    },
    methods: {
      createList() {// 生成规格列表
        this.list = this.attribute.reduce((acc, cur, index) => {
          if (index > 0) {
            let saveArr = []
            acc.forEach(item => {
              cur.forEach(subItem => {
                saveArr.push(`${item}, ${subItem}`)
              })
            })
            acc = saveArr
          }
          return acc
        }, this.attribute[0])
      }
    },
    created() {
      this.createList()
      console.log(this.list)
    }
  }
</script>