// 根據(jù)笛卡爾積來構(gòu)建二維數(shù)組，在這個二維數(shù)組中重新映射為對象數(shù)組，首先過濾
function addTag() {
? ? // 根據(jù)笛卡爾積來構(gòu)建二維數(shù)組，在這個二維數(shù)組中重新映射為對象數(shù)組
? ? const specList = formListAdd.value.specificationList//過濾tag標(biāo)簽，生成2維數(shù)組:?
? ? //數(shù)組對象中的數(shù)組取出，得到一個二維數(shù)組（藍色tag標(biāo)簽）
? ? const valueList = specList.filter((item: any) => item.values.length).map((item: any) => item.values)
? ? // 添加name值（黃色tag標(biāo)簽）//獲取維度名稱，放到數(shù)組中 右邊
? ? const titlesList = specList.filter((item: any) => item.title.length).map((item: any) => item.title)
? ? if (valueList.length == 0) {//如果規(guī)格沒有這種屬性，直接把規(guī)格屬性賦空
? ? ? ? formListAdd.value.skuList = []
? ? ? ? return
? ? }
? ? // 使用笛卡爾積算法將數(shù)據(jù)進行交叉處理
? ? var skuArr = valueList.reduce((pre: string[][], next: any[]) => {//pre是一個空的二維數(shù)組 next（黃色tag標(biāo)簽）的內(nèi)容也就是類型
? ? ? ? var array: string[][] = []//用這個空數(shù)組去匹配交叉數(shù)組
? ? ? ? pre.forEach(item1 => {//拿出空的一維數(shù)組
? ? ? ? ? ? next.forEach(item2 => {//遍歷黃色tag標(biāo)簽內(nèi)容，也就是交叉匹配
? ? ? ? ? ? ? ? array.push(item1.concat([item2]))//連接起來添加進array空數(shù)組
? ? ? ? ? ? ? ? return array
? ? ? ? ? ? })
? ? ? ? })
? ? ? ? return array
? ? }, [[]])
? ? // 進行拼接數(shù)據(jù)
? ? //構(gòu)建sku表格--最終渲染出表格
? ? let list = skuArr.map((item: any, index: number) => {//根據(jù)skuArr來構(gòu)建對象數(shù)組?
? ? ? ? let obj = { //對象將屬性值并渲染到sku表格中
? ? ? ? ? ? price: formListAdd.value.skuList[index] ? formListAdd.value.skuList[index].price : 1,//現(xiàn)價
? ? ? ? ? ? originalPrice: formListAdd.value.skuList[index] ? formListAdd.value.skuList[index].originalPrice : 1,//原價
? ? ? ? ? ? vipPrice: formListAdd.value.skuList[index] ? formListAdd.value.skuList[index].vipPrice : 1,//vip價格
? ? ? ? ? ? stock: 0,//庫存
? ? ? ? ? ? weight: 0,//重量
? ? ? ? ? ? img: "",//圖片
? ? ? ? ? ? barCode: 0,//隨機碼
? ? ? ? ? ? title: '',//維度名稱
? ? ? ? ? ? specification: ''
? ? ? ? } as any
? ? ? ? // 遍歷循環(huán)添加到sku數(shù)組中
? ? ? ? item.forEach((val: number, index: number) => {
? ? ? ? ? ? // 相當(dāng)于是添加一個對象
? ? ? ? ? ? obj['sku_' + titlesList[index]] = val;
? ? ? ? ? ? obj['title'] = item.join(',')
? ? ? ? ? ? obj['specification'] += formListAdd.value.specificationList[index].title + '_' + val + ','
? ? ? ? });
? ? ? ? return obj;
? ? })
? ? formListAdd.value.skuList.length = 0;//每次刪除tag標(biāo)簽調(diào)用笛卡爾算法
? ? Object.assign(formListAdd.value.skuList, list)//最終合并渲染數(shù)據(jù)到sku表
}

? <!-- 商品詳情表格渲染 ?span-method合并行或列的計算方法 -->
? ? ? ? ? ? ? ? <el-table :data="formListAdd.skuList" style="width: 100%" border :span-method="objectSpanMethod">
? ? ? ? ? ? ? ? ? ? <el-table-column width="100" align="center"
? ? ? ? ? ? ? ? ? ? ? ? v-for="item in (<any>formListAdd.specificationList).filter((item: any) => item.values.length > 0)"
? ? ? ? ? ? ? ? ? ? ? ? :prop="'sku_' + item.title" :label="item.title" />
? ? ? ? ? ? ? ? ? ? <!-- 循環(huán)數(shù)組，過濾數(shù)組的長度 -->
? ? ? ? ? ? ? ? ? ? <el-table-column prop="SkuIds" label="SkuId" align="center" />
? ? ? ? ? ? ? ? ? ? <el-table-column prop="vipPrice" label="￥VIP價(元)" width="150" align="center">
? ? ? ? ? ? ? ? ? ? ? ? <template #default="scope">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <el-input-number v-model="scope.row.vipPrice" size="small" :min="1" />
? ? ? ? ? ? ? ? ? ? ? ? </template>
? ? ? ? ? ? ? ? ? ? </el-table-column>
? ? ? ? ? ? ? ? ? ? <el-table-column prop="originalPrice" label="吊牌價" width="150" align="center">
? ? ? ? ? ? ? ? ? ? ? ? <template #default="scope">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <el-input-number v-model="scope.row.originalPrice" size="small" :min="1" />
? ? ? ? ? ? ? ? ? ? ? ? </template>
? ? ? ? ? ? ? ? ? ? </el-table-column>
? ? ? ? ? ? ? ? ? ? <el-table-column prop="price" label="價格" width="150" align="center">
? ? ? ? ? ? ? ? ? ? ? ? <template #default="scope">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <el-input-number v-model="scope.row.price" size="small" :min="1" />
? ? ? ? ? ? ? ? ? ? ? ? </template>
? ? ? ? ? ? ? ? ? ? </el-table-column>
? ? ? ? ? ? ? ? ? ? <el-table-column prop="stock" label="庫存" width="150" align="center">
? ? ? ? ? ? ? ? ? ? ? ? <template #default="scope">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <el-input-number v-model="scope.row.stock" size="small" :min="1" />
? ? ? ? ? ? ? ? ? ? ? ? </template>
? ? ? ? ? ? ? ? ? ? </el-table-column>
? ? ? ? ? ? ? ? ? ? <el-table-column prop="weight" label="重量" width="150" align="center">
? ? ? ? ? ? ? ? ? ? ? ? <template #default="scope">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <el-input-number v-model="scope.row.weight" size="small" :min="1" />
? ? ? ? ? ? ? ? ? ? ? ? </template>
? ? ? ? ? ? ? ? ? ? </el-table-column>
? ? ? ? ? ? ? ? ? ? <el-table-column prop="img" label="SUK圖片" width="150" align="center">
? ? ? ? ? ? ? ? ? ? ? ? <template #default="scope">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <el-upload action="http://192.168.1.188:8080/upload/admin" :show-file-list="false"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? :headers="headers" :on-success="handlePicSuccess" :before-upload="beforeAvatarUpload">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <img v-if="scope.row.img" :src="scope.row.img" class="avatars" />
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <el-icon v-else @click="imgIndex = scope.$index">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <Upload />
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </el-icon>
? ? ? ? ? ? ? ? ? ? ? ? ? ? </el-upload>
? ? ? ? ? ? ? ? ? ? ? ? </template>
? ? ? ? ? ? ? ? ? ? </el-table-column>
? ? ? ? ? ? ? ? ? ? <el-table-column prop="barCode" label="條形碼" width="250" align="center">
? ? ? ? ? ? ? ? ? ? ? ? <template #default="scope">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <el-input v-model="scope.row.barCode" size="small" style="width:200px;">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <template #append>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <el-button @click="scope.row.barCode = new Date().getTime()" size="small">隨機</el-button>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </template>
? ? ? ? ? ? ? ? ? ? ? ? ? ? </el-input>
? ? ? ? ? ? ? ? ? ? ? ? </template>
? ? ? ? ? ? ? ? ? ? </el-table-column>
? ? ? ? ? ? ? ? </el-table>

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }: any) => {//行 列 行的下標(biāo) 列的下標(biāo)
? ? //拿到第一列要合并的行數(shù)(獲取列表) 第一次渲染頁面時彈框數(shù)組為空，會報空指針錯誤，需要使用?.運算符解決
? ? let specList = formListAdd.value.specificationList.filter((e: any) => e.values?.length > 0);
? ? if (columnIndex < specList.length - 1) {//對要跨行的列進行計算，排除最后一個屬性列（最后一個屬性列不存在跨行中）
? ? ? ? let rowSpanNum = 1;//跨行的數(shù)量
? ? ? ? for (let i = columnIndex + 1; i < specList.length; i++) {
? ? ? ? ? ? //依次拿到每一列要合并的行數(shù)
? ? ? ? ? ? rowSpanNum *= specList[i].values.length;//跨行的數(shù)量=后面數(shù)組長度的乘積
? ? ? ? }
? ? ? ? if (rowIndex % rowSpanNum === 0) {//每次跨行的數(shù)量相同，所以當(dāng)前行索引取余數(shù)%跨行數(shù)量==0就是要跨行的開始
? ? ? ? ? ? return { rowspan: rowSpanNum, colspan: 1 } //當(dāng)條件成立時，即合并行數(shù)
? ? ? ? } else {
? ? ? ? ? ? return { rowspan: 0, colspan: 0 }
? ? ? ? }
? ? }