vue怎么使用笛卡爾積算法構建sku表格

本篇內容主要講解“vue怎么使用笛卡爾積算法構建sku表格”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue怎么使用笛卡爾積算法構建sku表格”吧!

1.根據笛卡爾積算法來構建二維數組

• 變量1接收過濾的tag標簽，生成二維數組組

• 變量2獲取維度名稱

判斷如果規格長度等于0，直接把規格屬性賦空，然后使用笛卡爾積算法將數據進行交叉處理（使用reduce方法，參數1：空的二維數組，參數2：變量2的數據(維度名稱標簽)，在聲明一個空的數組array(用這個空數組去匹配交叉數組),再拿出reduce參數1空的二維數組，forEach循環遍歷，在使用forEach遍歷變量2數據(維度名稱標簽)，進行交叉匹配,連接起來添加進array空數組，然后在這個二維數組中重新映射為對象數組,進行拼接數據構建sku表格

// 根據笛卡爾積來構建二維數組，在這個二維數組中重新映射為對象數組，首先過濾
function addTag() {
    // 根據笛卡爾積來構建二維數組，在這個二維數組中重新映射為對象數組
    const specList = formListAdd.value.specificationList//過濾tag標簽，生成2維數組: 
    //數組對象中的數組取出，得到一個二維數組（藍色tag標簽）
    const valueList = specList.filter((item: any) => item.values.length).map((item: any) => item.values)
    // 添加name值（黃色tag標簽）//獲取維度名稱，放到數組中 右邊
    const titlesList = specList.filter((item: any) => item.title.length).map((item: any) => item.title)
    if (valueList.length == 0) {//如果規格沒有這種屬性，直接把規格屬性賦空
        formListAdd.value.skuList = []
        return
    }
    // 使用笛卡爾積算法將數據進行交叉處理
    var skuArr = valueList.reduce((pre: string[][], next: any[]) => {//pre是一個空的二維數組 next（黃色tag標簽）的內容也就是類型
        var array: string[][] = []//用這個空數組去匹配交叉數組
        pre.forEach(item1 => {//拿出空的一維數組
            next.forEach(item2 => {//遍歷黃色tag標簽內容，也就是交叉匹配
                array.push(item1.concat([item2]))//連接起來添加進array空數組
                return array
            })
        })
        return array
    }, [[]])
    // 進行拼接數據
    //構建sku表格--最終渲染出表格
    let list = skuArr.map((item: any, index: number) => {//根據skuArr來構建對象數組 
        let obj = { //對象將屬性值并渲染到sku表格中
            price: formListAdd.value.skuList[index] ? formListAdd.value.skuList[index].price : 1,//現價
            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
        // 遍歷循環添加到sku數組中
        item.forEach((val: number, index: number) => {
            // 相當于是添加一個對象
            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標簽調用笛卡爾算法
    Object.assign(formListAdd.value.skuList, list)//最終合并渲染數據到sku表
}

2.合并表格

首先獲取規格列表，判斷然后對要跨行的列進行計算排除最后一個樹形列，定義跨行的數量為1，循環遍歷獲取每一列要合并的

行數，將跨行的數量=后面數組長度的乘積，每次跨行的數量相同，所以當前行索引取余數%跨行數量==0就是要跨行的開始

  <!-- 商品詳情表格渲染  span-method合并行或列的計算方法 -->
                <el-table :data="formListAdd.skuList"  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" />
                    <!-- 循環數組，過濾數組的長度 -->
                    <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" >
                                <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) => {//行 列 行的下標 列的下標
    //拿到第一列要合并的行數(獲取列表) 第一次渲染頁面時彈框數組為空，會報空指針錯誤，需要使用?.運算符解決
    let specList = formListAdd.value.specificationList.filter((e: any) => e.values?.length > 0);
    if (columnIndex < specList.length - 1) {//對要跨行的列進行計算，排除最后一個屬性列（最后一個屬性列不存在跨行中）
        let rowSpanNum = 1;//跨行的數量
        for (let i = columnIndex + 1; i < specList.length; i++) {
            //依次拿到每一列要合并的行數
            rowSpanNum *= specList[i].values.length;//跨行的數量=后面數組長度的乘積
        }
        if (rowIndex % rowSpanNum === 0) {//每次跨行的數量相同，所以當前行索引取余數%跨行數量==0就是要跨行的開始
            return { rowspan: rowSpanNum, colspan: 1 } //當條件成立時，即合并行數
        } else {
            return { rowspan: 0, colspan: 0 }
        }
    }

注意（實現具體思路）

a.首先我們添加規格時會生成一個規格的表格，然后也會生成一個由tag標簽形成的標簽項，此項就是添加的規格

b.例如我添加兩個規格，一個是尺寸，一個是顏色，那么就會生成兩個tag標簽項，當然tag標簽項除了有規格之外還有一個動態編輯標簽，意思就是跨域往規格里面添加不同的規格，如顏色可以添加紅色，藍色，尺寸可以添加XL，M等維度，那么在表格中怎么去生成尺寸和顏色這兩個規格的數據呢？

c.首先我是定義一個數組，然后我們添加規格的時候把規格以對象的形式push進去數組中，當我們去編輯tag標簽的時候，把tab的內容以數組的方式添加進去規格的對象中，做完這些操作之后就是生成SKU表格了

d.這里是采用計算屬性的方式來實現的，首先使用map映射的方式獲取到所有的規格組成一個二維數組例如上面添加的尺寸和顏色，那么就會獲取到一個二維數組，二維數組中XL,M組成一個數組，藍色，紅色也組成一個數組，然后使用map獲取到尺寸和顏色組成的數組

e.接下來是針對于二維數組使用笛卡爾積算法獲得所有規格交叉之后組成的二維數組，意思就是獲取一個二維數組，二維數組中尺寸和顏色全部交叉組成，組成新的一個二維數組，即生成XL和紅色，XL和藍色，M和紅色，M和藍色的數組，得到新的二維數組之后

f.我們還需要把這個二維數組使用雙重循環的方式拿到每個數組的元素，然后以規格當做key，具體的規格值當做value的方式添加進去對象中

g.然后定義一個數組，把對象push進去數組中，最后把這個數組渲染到表格上就可以了，表格中的的prop屬性是定義對象時的規格key值

到此，相信大家對“vue怎么使用笛卡爾積算法構建sku表格”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！