Demand (mall shopping, selection of specifications)

Product attributes (multiple): size, color, style
The existing combination mode is determined: that is, the sku that exists and is greater than 0

There are three groups of data:

1. All main specification (de duplication) array objects mainSKUList
2. All sub specification (de duplication) object arrays childSKUList are classified according to the key main specification id
3. All sku array objects skuList

Simple processing of data returned by back end

mainSKUList = [
  {
    id: 1,
    name: 'colour'
  },
  {
    id: 2,
    name: 'style'
  },
  {
    id: 3,
    name: 'size'
  }
]
childSKUList = {
  1:[
    {
      childid: 11,
      childsSpecName: 'red',
      checked: false,
      disabled: false
    },
    {
      childid: 12,
      childsSpecName: 'white',
      checked: false,
      disabled: false
    }
  ],
  2: [
    {
      childid: 21,
      childsSpecName: 'Beggars',
      checked: false,
      disabled: false
    },
    {
      childid: 22,
      childsSpecName: 'Explosive money',
      checked: false,
      disabled: false
    }
  ],
  3: [
    {
      childid: 31,
      childsSpecName: 's',
      checked: false,
      disabled: false
    },
    {
      childid: 32,
      childsSpecName: 'm',
      checked: false,
      disabled: false
    }
  ]
} 

skuList = [['s', 'red', 'Beggars'],['s', 'red', 'Explosive money'],['m', 'red', 'Beggars'],['m', 'red', 'Explosive money'],['s', 'white', 'Beggars'],['s', 'white', 'Explosive money']]

Page rendering

<div class="one-classfy" v-for="(item, index) in mainSKUList" :key="index">
  <p class="title-name">{{item.name}}</p>
  <button v-for="(el, i) in childSKUList[item.id]" :key="i" :class="el.checked ? 'selectActive' : ''" @click="checkSingleChildSpec(el, index, i)" :disabled="el.disabled">
    {{el.childsSpecName}}
  </button>
</div>

Select sub specification

// Get options
getCanCheckSpec(checkedSpecArr) {
  let couldCheckItems = []
  this.skuList.map(item => {
    let curr = [...item]
    curr = Array.from(new Set(curr.concat(checkedSpecArr)))
    if ([...curr].sort().join(',') === [...item].sort().join(',')) {
      couldCheckItems = couldCheckItems.concat(item)
    }
  })
  return Array.from(new Set(couldCheckItems))
},

// Get all selected sub specifications
getCheckedSpecList() {
  let checkedChildSKUList = []
  Object.keys(this.checkedChildSKUList).map(key => {
    checkedChildSKUList.push(this.checkedChildSKUList[key])
  })
  return checkedChildSKUList
},
checkSingleChildSpec(childSpec, index, i) {
  // First, select all the sub specifications of the same level
  let mainSKU = this.mainSKUList[index]
  let cIndex = this.childSKUList[mainSKU.id].findIndex(
    child => child.checked === true
  )
  if (cIndex > -1 && cIndex !== i) {
    this.childSKUList[mainSKU.id][cIndex].checked = false
  }
  childSpec.checked = !childSpec.checked
  // Save the selected sub specification to standby
  this.checkedChildSKUList[mainSKU.mainSpecId] = childSpec.checked
        ? childSpec.childsSpecName
        : undefined

  // Find selected sub specifications
  let checkedSpecBtns = this.getCheckedSpecList()
  // Get other sub specifications that can be selected according to the selected sub specifications, excluding the optional status under the same specification
  let allCanCheckSpecBtns = this.getCanCheckSpec(checkedSpecBtns)
  // Every time you click, it will match whether there are SKUs. Shop sku vo is all SKUs returned by the backend
  let skuEntry = this.shopSkuVo.find(
    item =>
      item.specNames
        .split('/')
        .sort()
        .join(',') === checkedSpecs.sort().join(',')
  )
  // Get the skuId clicked by the user
  if (skuEntry) {
    let selectSku = this.shopSkuVo.filter(d => d.skuId === skuEntry.skuId)
  }
}