原生 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" 为合并行数
以上即可。