原生 table--多級表頭嵌套及表格合並（二）

由於項目中使用打印功能element ui 的table 組件在預覽的時候 會產生樣式錯亂，表格錯位甚至展示不全的問題，這邊就用原生的table 把element ui 合並單元格的方式重新實現了一下效果。具體代碼如下：

首先獲取列表的數據，並初始化數據格式。

// 獲取發放詳情列表信息
        getInfoListData(id){
            let params = {
                id: id,
                type: "",
                token: getCookie('apToken')
            }
            this.$get('/stockReceiveDetail/getDetail',params).then(res=>{
                this.detailData = res.data;
                if(this.detailData.length>0){
                    this.detailData.forEach((item,index) =>{
                        this.$set(item,'labelName',(item.materialCode + '  ' + item.materialDesc));
                        this.$set(item, 'idName', 'printTable'+index);
                        if(item.typeList && item.typeList.length>0){ 
                            item.typeList = this.handleTableArr(item.typeList)
                        }
                    });
                }
            })
        },
          // 初始化發放詳情表格數據格式
        handleTableArr(data){
            let arr = [];
            data.forEach((element,i) => {
                let count = 0;
                element.infoList.forEach((item,index)=>{
                    count++;
                    this.stockapplyId =  element.infoList[0].id;
                    let deductChildInfo = {
                        span_name: index==0? element.infoList.length:0,
                        id:item.id,
                        // organizationCode: item.organizationCode,
                        unitDesc:item.unitDesc,
                        controlTypeDesc: item.controlTypeDesc,
                        brand: item.brand,
                        specs: item.specs,
                        goodsModel: item.goodsModel,
                        isHighValue: item.isHighValue,
                        batchSwitch: item.batchSwitch,
                        isBargain: item.isBargain,
                        effectiveDate: item.effectiveDate,
                        locationTypeDesc: item.locationTypeDesc,
                        stockAddressDesc: item.stockAddressDesc,
                        stockReceiveApplyId:item.stockReceiveApplyId,
                        amount: item.amount,
                        status:item.status,
                        statusDesc: item.statusDesc,
                        buttonType:item.buttonType, //按鈕類型 1發放 2修改 3刪除
                        buttonStatus:item.buttonStatus, //按鈕可用狀態 0不可用 1可用
                        infoTypeName: element.infoTypeName,
                        infoType:element.infoType
                    }
                    arr.push(deductChildInfo);
                })
                arr[arr.length - count]["count"] = count;
            });
            return arr;
        },

具體的合並操作在html 標簽上操作：

<div style="margin-top:20px" v-for="(item,index) in detailData" :key="index">
                        <table cellpadding="0" cellspacing="0" :id="item.idName">
                            <thead>
                                <tr class="firstHead">
                                    <th colspan="12" style="text-align:left">
                                        {{item.materialCode|sliceNumbers}}&nbsp;&nbsp;{{item.materialDesc}}
                                    </th>
                                    <th>{{item.statusDesc}}</th>
                                </tr>
                                <tr  class="twoHead">
                                    <th width="5%"></th>
                                    <!-- <th>門店編碼</th> -->
                                    <th>基本計量單位描述</th>
                                    <th>管控描述</th>
                                    <th>品牌</th>
                                    <th>規格</th>
                                    <th>型號</th>
                                    <th>高低值</th>
                                    <th>批次管理</th>
                                    <th>是否划扣</th>
                                    <th>有效期</th>
                                    <th>庫位類型</th>
                                    <th>倉庫編碼</th>
                                    <th>申請/發放數量</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="pt_body"
                                    v-for="(row, index) in item.typeList"
                                    :key="index">
                                    <td v-if="(row.infoType == 1 && index == 0 )||(row.infoType == 2&& index == 1)" :rowspan="row.count">{{row.infoTypeName}}</td>
                                    <td v-else-if="(index === item.typeList-1)">{{row.infoTypeName}}</td>
                                    <!-- <td>{{row.organizationCode}}</td> -->
                                    <td>{{row.unitDesc}}</td>
                                    <td>{{row.controlTypeDesc}}</td>
                                    <td>{{row.brand}}</td>
                                    <td>{{row.specs}}</td>
                                    <td>{{row.goodsModel}}</td>
                                    <td>{{row.isHighValue}}</td>
                                    <td>{{row.batchSwitch}}</td>
                                    <td>{{row.isBargain}}</td>
                                    <td>{{row.effectiveDate}}</td>
                                    <td>{{row.locationTypeDesc}}</td>
                                    <td>{{row.stockAddressDesc}}</td>
                                    <td>{{row.amount}}</td>
                                </tr>
                            </tbody>
                        </table>

其中：

colspan="12"  為合並12列，

:rowspan="row.count" 為合並行數
以上即可。