vue3使用笛卡尔积算法生成sku表格

通过输入框输入商品规格---通过弹出框表单输入商品规格，这里只是渲染输入的数据而已

  <!-- 商品规格 -->
                <el-card class="box-card">
                    <div>
                        <h3 class="header">规格维度</h3>
                        <el-button @click="handleSpecification">添加</el-button>
                    </div>
                    <el-table :data="formData.specificationList" style="width: 100%">
                        <el-table-column property="pecificationId" label="维度ID"  />
                        <el-table-column property="title" label="维度名称"  />
                        <el-table-column property="gmtCreate" label="创建时间" >
                            <template #default="scope">
                                {{ traversalTime(scope.row.gmtCreate) }}
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template #default="scope">
                                <el-button size="small" type="danger"
                                    @click="handleDeleteSpecification(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>

渲染sku表格

  <!-- 商品sku详情 -->
                <el-card class="box-card">
                    <div>
                        <h3 class="header">商品sku详情</h3>
                        <el-button @click="handleSkuPrice"
                            :disabled="formData.specificationList.length == 0">批量定价</el-button>
                    </div>
                    <div v-if="formData.specificationList.length">
                        <template v-for="(item, index) in formData.specificationList" :key="index">
                            <div>
                                <el-tag class="ml-2 tag" type="success">{{ item.title }}</el-tag>
                                <el-tag v-for="tag in item.pecificationList" :key="tag" class="mx-1 tag" closable
                                    :disable-transitions="false" @close="handleClose(tag, index)">
                                    {{ tag }}
                                </el-tag>
                                <el-input v-if="inputVisible && buttonIndex == index" style="width: 40px;" ref="InputRef"
                                    v-model="inputValue" class="ml-1 w-20 tag" size="small"
                                    @keyup.enter="handleInputConfirm(index)" @blur="handleInputConfirm(index)" />
                                <el-button v-else class="button-new-tag ml-1 tag" size="small" @click="showInput(index)">
                                    + 添加
                                </el-button>
                            </div>
                        </template>
                    </div>
                    <el-table :data="formData.skuList" :span-method="objectSpanMethod" style="width: 100%" border>
                        <el-table-column
                            v-for="(item, index) in formData.specificationList?.filter((item: any) => item.pecificationList.length)"
                            width="100" align="center" :prop="'id' + item.title" :label="item.title" />
                        <el-table-column prop="skuId" label="SkuId" align="center" />
                        <el-table-column prop="vipPrice" label="￥VIP价(元)">
                            <template #default="scope">
                                <el-input-number v-model="scope.row.vipPrice" size="small" :min="1" style="width: 80px;" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="originalPrice" label="吊牌价">
                            <template #default="scope">
                                <el-input-number v-model="scope.row.originalPrice" size="small" :min="1"
                                    style="width: 80px;" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="price" label="价格">
                            <template #default="scope">
                                <el-input-number v-model="scope.row.price" size="small" :min="1" style="width: 80px;" />
                            </template>
                        </el-table-column>
                        <el-table-column property="stock" label="库存">
                            <template #default="scope">
                                <el-input-number v-model="scope.row.stock" size="small" :min="1" style="width: 80px;" />
                            </template>
                        </el-table-column>
                        <el-table-column property="weight" label="重量">
                            <template #default="scope">
                                <el-input-number v-model="scope.row.weight" size="small" :min="1" style="width: 80px;" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="img" label="Sku图片" align="center">
                            <template #default="scope">
                                <el-upload class="upload-demo" :action="uploadPath" :show-file-list="false"
                                    :headers="headers" :on-success="handleAvatarSuccess">
                                    <img v-if="scope.row.img" :src="scope.row.img" class="avatar" />
                                    <el-button size="small" @click="handleUpImgIndex(scope.$index, scope.row)"><el-icon
                                            class="el-icon--right">
                                            <Upload />
                                        </el-icon></el-button>
                                </el-upload>
                            </template>
                        </el-table-column>
                        <el-table-column prop="barcode" label="条形码" width="170">
                            <template #default="scope">
                                <el-input v-model="scope.row.barcode" size="small" style="width:150px;">
                                    <template #append>
                                        <el-button @click="scope.row.barcode = new Date().getTime()" size="small">随机
                                        </el-button>
                                    </template>
                                </el-input>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>

商品规格表格数据-------formData是一个提交后台的表单；

 /**规格维度表格 new Date().getTime()*/
    let pecification = {
        pecificationId: '',
        title: ProductData.TypeParameter,
        pecificationList: [] as string[],
        gmtCreate: new Date().getTime(),
        gmtUpdate: new Date().getTime()
    }
    if (pecification.title) {
        if (formData.specificationList.some(item => item.title === pecification.title)) {
            ElMessage.error('参数不能重复！')
            return
        }
        formData.specificationList.push(pecification);
        createSku()
    }

创建sku表格

/**创建sku表格 */
function createSku() {
    const specList = formData.specificationList;
    const pecificationList = specList.filter(item => item.pecificationList.length).map(item => item.pecificationList);
    const titles = specList.map(item => item.title);
    if (pecificationList.length == 0) {
        formData.skuList = [];
        return
    }
    var skuList = pecificationList.reduce((pre: string[][], next) => {
        var array: string[][] = [];
        pre.forEach(item => {
            next.forEach((ite: any) => {
                array.push(item.concat([ite]))
            });
        });
        return array
    }, [[]]);
    console.log(skuList , '----skuList-');
    const { vipPrice, price, originalPrice, stock } = formData
    var skuTable = skuList.map(item => {
        const temp:any = {
            price: price,//现价
            vipPrice: vipPrice,//vip价
            originalPrice: originalPrice,//吊牌价
            stock: stock,//库存
            barcode: '',//条形码
            skuId: '',
            weight: undefined,//重量
            img: '',
            titleArray: new Array<string>(),//规格维度名称
            specArray: new Array<string>(),//规格维度参数
            title: '',
            specification: ''
        };
        item.forEach((val, index) => {
            var key = 'id' + titles[index];
            temp[key as keyof typeof temp] = val;
            console.log(val + '-----');
            temp.titleArray.push(val);
            temp.specArray.push(titles[index] + '_' + val);
        });
        temp.title = temp.titleArray.join(',');
        temp.specification = temp.specArray.join(',');
        let findItem = formData.skuList.find(item => item.specification === temp.specification);
        if (findItem) {
            return findItem
        }
        let skuObj = new ClassSku();
        Object.assign(skuObj, temp);
        return skuObj;
    })
    formData.skuList = skuTable
}

 合并sku表格

//合并表格
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }: any) => {
    //拿到第一列要合并的行数
    let specList = formData.specificationList.filter((e: any) => e.pecificationList?.length > 0);

    if (columnIndex < specList.length - 1) {//列下标小于规格数组长度减一
        let rowSpanNum = 1;//行
        for (let i = columnIndex + 1; i < specList.length; i++) {
            //依次拿到每一列要合并的行数
            rowSpanNum *= specList[i].pecificationList.length;
        }
        if (rowIndex % rowSpanNum === 0) {
            //当条件成立时，即合并行数
            return { rowspan: rowSpanNum, colspan: 1 }
        } else {
            return { rowspan: 0, colspan: 0 }
        }
    }
}

sku表格里面的sku参数属性，定义sku参数

const inputValue = ref('')//sku表格输入框
const inputVisible = ref(false)
let buttonIndex = ref<number | ''>('')
const InputRef: any = ref<InstanceType<typeof ElInput>>()
const handleClose = (tag: string, index: number) => {
    formData.specificationList[index].pecificationList.splice(formData.specificationList[index].pecificationList.indexOf(tag), 1)
    createSku()
}
const showInput = (index: number) => {
    inputVisible.value = true
    buttonIndex.value = index
    nextTick(() => {
        InputRef.value[0]!.input!.focus()
    })
}
const handleInputConfirm = (index: number) => {
    if (inputValue.value) {
        formData.specificationList[index].pecificationList.push(inputValue.value)
        createSku()
    }
    inputVisible.value = false
    inputValue.value = ''
}

 效果图