vue 中element-ui 自定义商品sku组件

1、根据设置的规格模板切换，展示对应的商品规格，这里使用的是自定义的商品规格模板组件：https://upwqy.com/details/281.html

   <el-form-item>

                  <GoodsSpec v-model="list.specParams" />

                  <el-button style="margin-top: 20px" size="mini" type="success" @click="buildSpec">立即生成</el-button>
                </el-form-item>

2、定义sku处理类

class GoodsSpecClass {
  constructor(origin) {
    this.origin = origin
    this.spec = []
    this.getTemp()
  }
  getTemp() {
    const temp = []

    this.origin.forEach(function(item, itemIndex) {
      temp[itemIndex] = []
      item.value.forEach(function(val, valIndex) {
        temp[itemIndex].push(item.name + ':' + val)
      })
    })

    this.temp = temp
  }
  combination(length = 0) {
    // js 排序组合
    const that = this
    const tempSpec = []
    if (that.temp.length < 0) {
      return
    }
    if (length === 0) {
      that.length = that.temp.length
      return this.combination(length + 1)
    }
    const data = that.temp[length - 1]
    if (length === 1) {
      that.spec = data
    } else {
      that.spec.forEach(function(item, itemIndex) {
        data.forEach(function(item1) {
          tempSpec.push(item + ',' + item1)
        })
      })

      that.spec = tempSpec
    }
    if (length === this.length) {
      return that.spec
    } else {
      this.combination(length + 1)
    }
  }
  splitSku(skuStr) {
    const temp = skuStr.split(',')
    const res = []

    temp.forEach(function(item, index) {
      const arr = item.split(':')

      res[index] = {
        'name': arr[0],
        'value': arr[1]
      }
    })

    return res
  }

  build() {
    this.combination()
    console.log(this.spec)

    const that = this
    const result = []
    this.spec.forEach(function(item, index) {
      const sku = that.splitSku(item)
      result[index] = {
        sku_attrs: sku,
        sku_key: item
      }
    })

    return result
  }
}
export default GoodsSpecClass

3、点击立即生成

 buildSpec() {
      const spec = new GoodsSpecClass(this.list.specParams)
      const products = spec.build()
      console.log(products)
    },