vue怎么使用笛卡爾積算法構(gòu)建sku表格

本篇內(nèi)容主要講解“vue怎么使用笛卡爾積算法構(gòu)建sku表格”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“vue怎么使用笛卡爾積算法構(gòu)建sku表格”吧!

1.根據(jù)笛卡爾積算法來構(gòu)建二維數(shù)組

• 變量1接收過濾的tag標(biāo)簽，生成二維數(shù)組組

• 變量2獲取維度名稱

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

// 根據(jù)笛卡爾積來構(gòu)建二維數(shù)組，在這個(gè)二維數(shù)組中重新映射為對(duì)象數(shù)組，首先過濾
function addTag() {
    // 根據(jù)笛卡爾積來構(gòu)建二維數(shù)組，在這個(gè)二維數(shù)組中重新映射為對(duì)象數(shù)組
    const specList = formListAdd.value.specificationList//過濾tag標(biāo)簽，生成2維數(shù)組: 
    //數(shù)組對(duì)象中的數(shù)組取出，得到一個(gè)二維數(shù)組（藍(lán)色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ù)進(jìn)行交叉處理
    var skuArr = valueList.reduce((pre: string[][], next: any[]) => {//pre是一個(gè)空的二維數(shù)組 next（黃色tag標(biāo)簽）的內(nèi)容也就是類型
        var array: string[][] = []//用這個(gè)空數(shù)組去匹配交叉數(shù)組
        pre.forEach(item1 => {//拿出空的一維數(shù)組
            next.forEach(item2 => {//遍歷黃色tag標(biāo)簽內(nèi)容，也就是交叉匹配
                array.push(item1.concat([item2]))//連接起來添加進(jìn)array空數(shù)組
                return array
            })
        })
        return array
    }, [[]])
    // 進(jìn)行拼接數(shù)據(jù)
    //構(gòu)建sku表格--最終渲染出表格
    let list = skuArr.map((item: any, index: number) => {//根據(jù)skuArr來構(gòu)建對(duì)象數(shù)組 
        let obj = { //對(duì)象將屬性值并渲染到sku表格中
            price: formListAdd.value.skuList[index] ? formListAdd.value.skuList[index].price : 1,//現(xiàn)價(jià)
            originalPrice: formListAdd.value.skuList[index] ? formListAdd.value.skuList[index].originalPrice : 1,//原價(jià)
            vipPrice: formListAdd.value.skuList[index] ? formListAdd.value.skuList[index].vipPrice : 1,//vip價(jià)格
            stock: 0,//庫(kù)存
            weight: 0,//重量
            img: "",//圖片
            barCode: 0,//隨機(jī)碼
            title: '',//維度名稱
            specification: ''
        } as any
        // 遍歷循環(huán)添加到sku數(shù)組中
        item.forEach((val: number, index: number) => {
            // 相當(dāng)于是添加一個(gè)對(duì)象
            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表
}

2.合并表格

首先獲取規(guī)格列表，判斷然后對(duì)要跨行的列進(jìn)行計(jì)算排除最后一個(gè)樹形列，定義跨行的數(shù)量為1，循環(huán)遍歷獲取每一列要合并的

行數(shù)，將跨行的數(shù)量=后面數(shù)組長(zhǎng)度的乘積，每次跨行的數(shù)量相同，所以當(dāng)前行索引取余數(shù)%跨行數(shù)量==0就是要跨行的開始

  <!-- 商品詳情表格渲染  span-method合并行或列的計(jì)算方法 -->
                <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" />
                    <!-- 循環(huán)數(shù)組，過濾數(shù)組的長(zhǎng)度 -->
                    <el-table-column prop="SkuIds" label="SkuId" align="center" />
                    <el-table-column prop="vipPrice" label="￥VIP價(jià)(元)" 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="吊牌價(jià)" 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="價(jià)格" 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="庫(kù)存" 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">隨機(jī)</el-button>
                                </template>
                            </el-input>
                        </template>
                    </el-table-column>
                </el-table>

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

注意（實(shí)現(xiàn)具體思路）

a.首先我們添加規(guī)格時(shí)會(huì)生成一個(gè)規(guī)格的表格，然后也會(huì)生成一個(gè)由tag標(biāo)簽形成的標(biāo)簽項(xiàng)，此項(xiàng)就是添加的規(guī)格

b.例如我添加兩個(gè)規(guī)格，一個(gè)是尺寸，一個(gè)是顏色，那么就會(huì)生成兩個(gè)tag標(biāo)簽項(xiàng)，當(dāng)然tag標(biāo)簽項(xiàng)除了有規(guī)格之外還有一個(gè)動(dòng)態(tài)編輯標(biāo)簽，意思就是跨域往規(guī)格里面添加不同的規(guī)格，如顏色可以添加紅色，藍(lán)色，尺寸可以添加XL，M等維度，那么在表格中怎么去生成尺寸和顏色這兩個(gè)規(guī)格的數(shù)據(jù)呢？

c.首先我是定義一個(gè)數(shù)組，然后我們添加規(guī)格的時(shí)候把規(guī)格以對(duì)象的形式push進(jìn)去數(shù)組中，當(dāng)我們?nèi)ゾ庉媡ag標(biāo)簽的時(shí)候，把tab的內(nèi)容以數(shù)組的方式添加進(jìn)去規(guī)格的對(duì)象中，做完這些操作之后就是生成SKU表格了

d.這里是采用計(jì)算屬性的方式來實(shí)現(xiàn)的，首先使用map映射的方式獲取到所有的規(guī)格組成一個(gè)二維數(shù)組例如上面添加的尺寸和顏色，那么就會(huì)獲取到一個(gè)二維數(shù)組，二維數(shù)組中XL,M組成一個(gè)數(shù)組，藍(lán)色，紅色也組成一個(gè)數(shù)組，然后使用map獲取到尺寸和顏色組成的數(shù)組

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

f.我們還需要把這個(gè)二維數(shù)組使用雙重循環(huán)的方式拿到每個(gè)數(shù)組的元素，然后以規(guī)格當(dāng)做key，具體的規(guī)格值當(dāng)做value的方式添加進(jìn)去對(duì)象中

g.然后定義一個(gè)數(shù)組，把對(duì)象push進(jìn)去數(shù)組中，最后把這個(gè)數(shù)組渲染到表格上就可以了，表格中的的prop屬性是定義對(duì)象時(shí)的規(guī)格key值

到此，相信大家對(duì)“vue怎么使用笛卡爾積算法構(gòu)建sku表格”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！