SKU1

  <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="danger" @click="handleClick" plain>确定</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>
  </div>

export default {
  data() {
    return {
      list: [
        { name: "型号", list: ["I9", "I7", "I5", "I3", "IAM"] },
        { name: "品牌", list: ["惠普", "三星", "华硕", "戴尔", "MacPro"] },
        { name: "配置", list: ["500GBSSD", "1TSSD", "2TSSD", "250GBSSD", "可定制"] },
      ],
      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]]); 
        }
      }
    },
  },
};