vue sku笛卡尔积数据插入表格

Question

需求如下:网上搜了一下这种数据叫做笛卡尔积,但是现在需要的数据还造不出来

这个是数据我需要取specItem和specName

点击黄色,s和m 最后插入到表格中应该是第一行黄色s, 第二行黄色m

所有的代码如下,求详细解释

 handleCurrentHelpTable(val){
      this.selectProductId = val.id; //规格模板选择数据行的id
      this.selectHelpData = val;
      // sku规格名字
      this.productSpecs = val.specItems;
      console.log(val)
      let tableCategoryList = [];
      let productSpecDetail = [];
      if(val.specItems.length !=0){
        //外层数组
        let desArray = val.specItems;
        for(let i=0;i<desArray.length;i++){
          let tempObj = {};
          let tempHeaderFileds = {}; //动态表头字段
          tempObj.specName = desArray[i].specName;//规格名字'颜色','测试'
          let children = desArray[i].specItem.split(','); //规格值'[1111],[2222]'
          let childrenList = [];  
       
          
          for(let j=0;j<children.length;j++){  
            let tempChidrenObj = {
              specItem:children[j],
              image:"",
            }
            childrenList.push(tempChidrenObj);
          }
          tempObj.specItems = childrenList;
          tempObj.productspecId =  this.selectProductId;
          childrenList.image =this.imgLoopList.image;
          console.log(  this.uploadImgName,'dsadsadsasa')
          tempObj.value = `attributeName${i+1}`;  
          tempObj.isCheck = false;
          //动态表头的数据name: "颜色"value: "attributeName2"
          tempHeaderFileds.value = `attributeName${i+1}`;
          tempHeaderFileds.name = desArray[i].specName;  //productSkus数组传入的字段名
          tableCategoryList.push(tempObj);
          //动态表头
          productSpecDetail.push(tempHeaderFileds); 
        }
      }
      this.tableCategoryList = tableCategoryList; //规格数据
      this.productSpecDetail = productSpecDetail; //动态表头
      var arr = [
        ['黑色', '白色', '蓝色'],
        ['8GB', '16GB', '32GB'],
        ['大', '中', '小']
    ];
     
    console.log(this.descartes(arr),'this.tableCategoryList');
          
      console.log(this.tableCategoryList,'===========================')
      console.log('帮助框table的数据--------------', this.selectHelpData)
    },
 //点击tag标签
    clickTag(value,field,indexId){
      console.log(value,indexId,this.chooseTag,'-----------------')
      let that = this;
      for(let c=0;c<this.chooseTag.length;c++){
        if(this.chooseTag[c].indexId==indexId){
          let tableIndex = this.chooseTag[c].tableIndex;
          this.skuTable.splice(this.chooseTag[c].tableIndex,1);
          this.chooseTag.splice(c,1);
          for(let e=0;e<that.chooseTag.length;e++){
            if(that.chooseTag[e].tableIndex>tableIndex){
              that.chooseTag[e].tableIndex -= 1;
            }
          }
          console.log(this.chooseTag,999999999999999999999)
          return;
        }
      }
      // this.activeProduc = item;
      // console.log("我点击了标签"+item);
      // console.log(this.checkboxGroup)
    
      this.addProductSkuBtn();
      this.skuTable[this.skuTable.length-1][field] = value.specItem; //数组长度为1时下标为0，需要length-1赋值
      // console.log(this.skuTable,'skutable======')
      // console.log(this.skuTable.length,this.skuTable.length-1,'lenghh=====')
      let chooseObj = {
        indexId:indexId,
        tableIndex:this.skuTable.length-1,
      }
      //indexId: "23" tableIndex: 0   23代表选中了第二行第三个
      this.chooseTag.push(chooseObj);  
      console.log(this.skuTable,'this.chooseTag');
      let attributeName1 = [];
      let attributeName2 = [];
      let finalArray = [];
      this.skuTable.forEach(item=>{
        console.log(item,'item---------------------')
        attributeName1.push(item.attributeName1);
        attributeName2.push(item.attributeName2);
      })
      finalArray.push(attributeName1)
      finalArray.push(attributeName2)
      // let finalArr = attributeName1.concat(attributeName2);
      console.log(this.descartes(finalArray) ,'finalArr11111111111111111111')
    },