在vue中動態添加商品SKU

1、需要在項目中引用jquery，效果如下圖：(商品規格是動態從后台獲取的，每次勾選會去組合)

2、多選框代碼結構如下：

<!--SKU-->
                <div class="wrap" v-if="this.obj.length > 0">
                    <div v-if="goodsId == '' || goodsId == undefined || goodsId == null">
                        <div class="control-group choose_config">
                            <el-form-item label="商品規格">
                                <div class="controls">
                                    <div v-for="(item,index) in obj" :key="index">
                                        <h3 class="Father_Title">{{Object.keys(item).join()}}</h3>
                                        <ul :class="'Father_Item' + ' ' + 'Father_Item'+index">
                                            <li v-for="val,index in item[Object.keys(item).join()]" :key="index"><label><input
                                                id="Checkbox0" type="checkbox" @change="init"
                                                class="checkbox check_item" :value="val">{{val}}</label></li>
                                        </ul>
                                        <br>
                                    </div>
                                </div>
                            </el-form-item>
                        </div>
                        <!-- 生成表格 -->
                        <div class="control-group mt10">
                            <el-form-item>
                                <div class="controls" id="createTable"></div>
                            </el-form-item>
                        </div>
                    </div>
                </div>
                <!--SKU-->
// 商品數據結構如下，循環渲染，每次點擊多選框生成表格。

      obj = [
       {12: ["22"]},
       {出行人數: ["單人", "三人行"]},
       {團期: ["01/30", "02/12", "02/15", "01/20"]}
     ]

3、動態生成表格：

// 添加商品規格列表
            init() {
                $('.checkbox', parent).each(function () {
                    var bCheck2 = true;
                    if (_this.hasClass('check_all')) {
                        if (_this.get(0).checked) {
                            bCheck2 = true;
                            $('.check_item', parent).prop('checked', bCheck2);
                        } else {
                            bCheck2 = false;
                            $('.check_item', parent).prop('checked', bCheck2);
                        }
                        return false;
                    } else {
                        if ((!this.checked) && (!$(this).hasClass('check_all'))) {
                            bCheck2 = false;
                            $('.check_all', parent).prop('checked', bCheck2);
                            return false;
                        }
                    }
                    $('.check_all', parent).prop('checked', bCheck2);
                });
                this.Creat_Table();
            },
            Creat_Table() {
                this.hebingFunction();
                var SKUObj = $('.Father_Title');
                var arrayTile = new Array(); // 表格標題數組
                var arrayInfor = new Array(); // 盛放每組選中的CheckBox值的對象
                var arrayColumn = new Array(); // 指定列，用來合並哪些列
                var bCheck = true; // 是否全選，只有全選，表格才會生成
                var columnIndex = 0;
                $.each(SKUObj, function (i, item) {
                    arrayColumn.push(columnIndex++);
                    arrayTile.push(SKUObj.eq(i).text().replace('：', ''));
                    var itemName = '.Father_Item' + i;
                    var bCheck2 = true; // 是否全選
                    
                    // 獲取選中的checkbox的值
                    var order = new Array();
                    $(itemName + ' .check_item:checked').each(function () {
                        order.push($(this).val());
                    });
                    
                    arrayInfor.push(order);
                    if (order.join() == '') {
                        bCheck = false;
                    }
                })
                
                // 開始生成表格
                if (bCheck) {
                    $('#createTable').html('');
                    var table = $('<table id="process" class="columnList"></table>');
                    table.appendTo($('#createTable'));
                    var thead = $('<thead></thead>');
                    thead.appendTo(table);
                    var trHead = $('<tr></tr>');
                    trHead.appendTo(thead);
                    // 創建表頭
                    var str = '';
                    $.each(arrayTile, function (index, item) {
                        str += '<th width="100">' + item + '</th>';
                    })
                    str += '<th  width="">商品價格</th><th width="">市場價格</th><th width="">庫存</th><th width="">已售銷量</th><th width="">庫存預警值</th>';
                    
                    trHead.append(str);
                    var tbody = $('<tbody></tbody>');
                    tbody.appendTo(table);
                    var zuheDate = this.doExchange(arrayInfor);
                    if (zuheDate.length > 0) {
                        //創建行
                        $.each(zuheDate, function (index, item) {
                            var td_array = item.split(',');
                            var tr = $('<tr></tr>');
                            tr.appendTo(tbody);
                            var str = '';
                            $.each(td_array, function (i, values) {
                                str += '<td>' + values + '</td>';
                            });
                            str += '<td ><input  value="" class="inpbox txt1 inpbox-mini" type="text"></td>';
                            str += `<td ><input  value="" class="inpbox txt2 inpbox-mini" type="text"></td>`;
                            str += '<td ><input  value="" class="inpbox txt3 inpbox-mini" type="text"></td>';
                            str += '<td ><input  value="0" disabled="disabled" class="inpbox txt4 inpbox-mini" type="text"></td>';
                            str += '<td ><input  value="" class="inpbox txt5 inpbox-mini" type="text"></td>';
                            tr.append(str);
                        });
                    }
                    
                    //結束創建Table表
                    arrayColumn.pop(); //刪除數組中最后一項
                    //合並單元格
                    $(table).mergeCell({
                        // 目前只有cols這么一個配置項, 用數組表示列的索引,從0開始
                        cols: arrayColumn
                    });
                } else {
                    //未全選中,清除表格
                    document.getElementById('createTable').innerHTML = "";
                }
            },
            hebingFunction: function () {
                $.fn.mergeCell = function (options) {
                    return this.each(function () {
                        var cols = options.cols;
                        for (var i = cols.length - 1; cols[i] != undefined; i--) {
                            mergeCell($(this), cols[i]);
                        }
                        dispose($(this));
                    })
                };
                
                function mergeCell($table, colIndex) {
                    $table.data('col-content', ''); // 存放單元格內容
                    $table.data('col-rowspan', 1); // 存放計算的rowspan值 默認為1
                    $table.data('col-td', $()); // 存放發現的第一個與前一行比較結果不同td(jQuery封裝過的), 默認一個"空"的jquery對象
                    $table.data('trNum', $('tbody tr', $table).length); // 要處理表格的總行數, 用於最后一行做特殊處理時進行判斷之用
                    // 進行"掃面"處理 關鍵是定位col-td, 和其對應的rowspan
                    $('tbody tr', $table).each(function (index) {
                        // td:eq中的colIndex即列索引
                        var $td = $('td:eq(' + colIndex + ')', this);
                        // 獲取單元格的當前內容
                        var currentContent = $td.html();
                        // 第一次時走次分支
                        if ($table.data('col-content') == '') {
                            $table.data('col-content', currentContent);
                            $table.data('col-td', $td);
                        } else {
                            // 上一行與當前行內容相同
                            if ($table.data('col-content') == currentContent) {
                                // 上一行與當前行內容相同則col-rowspan累加, 保存新值
                                var rowspan = $table.data('col-rowspan') + 1;
                                $table.data('col-rowspan', rowspan);
                                // 值得注意的是 如果用了$td.remove()就會對其他列的處理造成影響
                                $td.hide();
                                // 最后一行的情況比較特殊一點
                                // 比如最后2行 td中的內容是一樣的, 那么到最后一行就應該把此時的col-td里保存的td設置rowspan
                                // 最后一行不會向下判斷是否有不同的內容
                                if (++index == $table.data('trNum'))
                                    $table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
                            }
                            // 上一行與當前行內容不同
                            else {
                                // col-rowspan默認為1, 如果統計出的col-rowspan沒有變化, 不處理
                                if ($table.data('col-rowspan') != 1) {
                                    $table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
                                }
                                // 保存第一次出現不同內容的td, 和其內容, 重置col-rowspan
                                $table.data('col-td', $td);
                                $table.data('col-content', $td.html());
                                $table.data('col-rowspan', 1);
                            }
                        }
                    })
                }
                
                // 同樣是個private函數 清理內存之用
                function dispose($table) {
                    $table.removeData();
                }
            },
            doExchange: function (doubleArrays) {
                // 二維數組，最先兩個數組組合成一個數組，與后邊的數組組成新的數組，依次類推，知道二維數組變成以為數組，所有數據兩兩組合
                var len = doubleArrays.length;
                if (len >= 2) {
                    var arr1 = doubleArrays[0];
                    var arr2 = doubleArrays[1];
                    var len1 = arr1.length;
                    var len2 = arr2.length;
                    var newLen = len1 * len2;
                    var temp = new Array(newLen);
                    var index = 0;
                    for (var i = 0; i < len1; i++) {
                        for (var j = 0; j < len2; j++) {
                            temp[index++] = arr1[i] + ',' + arr2[j];
                        }
                    }
                    var newArray = new Array(len - 1);
                    newArray[0] = temp;
                    if (len > 2) {
                        var _count = 1;
                        for (var i = 2; i < len; i++) {
                            newArray[_count++] = doubleArrays[i];
                        }
                    }
                    return this.doExchange(newArray);
                } else {
                    this.form.array1 = doubleArrays[0] // 獲得的組合數據，需要自己把后面的價格信息拼接上去
                    this.count = this.form.array1.length
                    return doubleArrays[0];
                }
            },
            di() { // 獲取表格數據，並轉換為JSON格式
                this.goodArr = []
                for (let i = 0; i < $('.txt1').length; i++) {
                    this.form.array1[i] += ',' + $('.txt1').eq(i).val()
                    this.form.array1[i] += ',' + $('.txt2').eq(i).val()
                    this.form.array1[i] += ',' + $('.txt3').eq(i).val()
                    this.form.array1[i] += ',' + $('.txt4').eq(i).val()
                    this.form.array1[i] += ',' + $('.txt5').eq(i).val()
                }
                
                for (let k = 0; k < this.form.array1.length; k++) {
                    let obj2 = {};
                    let str = this.form.array1[k].split(",");
                    let strSize = str.length;
                    let nameSize = this.obj.length;
                    let o = this.obj
                    if (strSize > 5) {
                        for (let j = 0; j < nameSize; j++) {
                            let first = Object.keys(o[j]).join()
                            obj2[first] = str[j]
                        }
                        obj2.price = str[strSize - 5];
                        obj2.marketPrice = str[strSize - 4];
                        obj2.stock = str[strSize - 3];
                        obj2.soldVolume = str[strSize - 2];
                        obj2.warnStock = str[strSize - 1];
                    }
                    this.goodArr.push(obj2);
                }
                console.log(this.goodArr)
            },