在vue3应用二维数组解决商品多规格的问题

const createNewTable = () => {
  specArry.value = [];
  cols.value = [];
  state.formData.skuList = [];
  let newArr = ref<string[][]>([]);

  if (dynamic_spec.value.length !== 0) {
    dynamic_spec.value.forEach((element, index) => {
      newArr.value.push(element.specAttr)
      cols.value.push({
        prop: "list" + index,
        label: element.specName
      });

    });
    getCartesian(newArr.value);
    totalSpec.value.forEach((element:string) => {
      const sku:Sku = {
        // 图片
        images: "",
        // 规格
        specifications: "",
        // 条码
        productCode: "",
        // 零售价格
        salePrice: 0,
        // 批发价格
        tradePrice: 0,
        // 市场价格
        marketPrice: 0,
        // 折扣
        discount1: 0,
        // 预计采购价
        purchasePrice: 0,
        // 备注
        remark: ""
      }
      cols.value.forEach((item, index) => {
        let element_attr = element.split("_");
        Reflect.set(sku, item.prop, element_attr[index])
      });
      // 保存到后台的实际规格属性值
      sku.specifications = element

      state.formData.skuList.push(sku);
    });
  }
}


const getCartesian=(specAttr:string[][])=> {
  let result = specAttr.reduce((last, current) => {
    const array: string[] = [];
    last.forEach(par1 => {
      current.forEach(par2 => {
        array.push(par1 + "_" + par2);
      });
    });
    return array;
  });
  totalSpec.value = result
}