線上項目示例GIF

spu sku如果不懂的話可以百度，這篇只教你如何實現，整體分為4個步驟，你可以根據自己的業務，靈活使用。

1. 獲取源數據

數據源的簡單模型（這里就不貼實際的數據結構，可以在源碼中查看）

let metaData=[[1],[2,3,4],[5,6],[7]]

2. 生成sku

sku數據的簡單模型

let sku=[[1,2,5,7],
         [1,2,6,7],
         [1,3,5,7],
         [1,3,6,7],
         [1,4,5,7],
         [1,4,6,7]]

可以看的出來最終生成了 1x3x2x1 = 6 條記錄

descartes(metaData) {
            return metaData.reduce((x, y) => {
                let arr = [];
                x.forEach(x => y.forEach(y => arr.push(x.concat([y]))))
                return arr;
            }, [[]])
        

3. 生成表格

生成表格就很簡單了，遍歷sku生成表格的行和列，并返回通過sku生成的列的下標數組用于表格合并的時候指定列，根據業務需求在** let tdAppend =**替換你自己的內容

generatorTable(skuData) {
            let mergeCellColumn=[]
            // 生成表格
            $("thead").html("")
            $("tbody").html("")

            if (skuData[0].length==0){
                return
            }
            skuData.forEach(function (item, index) {
                // 生成表頭
                if (index == 0) {
                    let tHeader = "<tr>"
                    item.forEach(function (sub, i) {
                        mergeCellColumn.push(++i);
                        tHeader += "<th>" + sub.specName + "</th>"
                    })
                    tHeader += "<th>價格</th><th>庫存</th></tr>"
                    $("thead").append(tHeader)
                }
                // 生成表格內容
                let tr = "<tr>"
                let td = ""
                item.forEach(function (sub) {
                    td += "<td>" + sub.specValueName + "</td>"
                })
                let tdAppend = "<td><input  type='number'  class='form-control'/></td><td><input type='number' class='form-control'/></td>"
                td = td + tdAppend
                tr = tr + td + "</tr>"
                $("tbody").append(tr)
            });
            return mergeCellColumn
        },

4. 合并單元格

通過第二步的數據我們可以得到一個6行4列的表格，將每列單獨提取出來

                                         
第一列 [1,1,1,1,1,1]   [1]   
第二列 [2,2,3,3,4,4]   [2,3,4]
第三列 [5,6,5,6,5,6]   [5,6,5,6,5,6]
第四列 [7,7,7,7,7,7]   [7]

合并單元其實就是解決數組相鄰去重問題，只不過在合并行使用 display:none 而不是真實刪除

mergeCell(table_id, columns) {
            columns.forEach(function (column) {
                let tds = $(table_id + " tr td:nth-child(" + column + ")"); // 獲取當前表格第幾列的所有td對象
                let rowSpanIndex=0
                let rowSpanNum = 1;
                for (let i = 0; i < tds.length; i++) {
                    if (i>=tds.length-1){
                        return
                    }
                    if ($(tds[i]).text()==$(tds[i+1]).text()){
                        $(tds[i+1]).hide();
                        $(tds[rowSpanIndex]).attr("rowSpan", ++rowSpanNum);
                    }else{
                        rowSpanIndex=i+1
                        rowSpanNum=1
                    }
                }

            })
        }

到這里一個電商sku生成就完成了。
源碼地址