element ui ---table 多級表頭嵌套以及合並單元格（一）

最近做的項目中有個合並表頭和內容的表格，覺得新鮮，記錄一下知識點。

要實現的效果如下：

 

 第一行和第二行分別是表頭，第三行和第四行第一列實現多行合並。具體代碼實現如下（代碼是直接摘取項目）：

　　　　　　　　<el-row style="margin-top:20px" v-for="(item,index) in detailData" :key="index">
                        <el-table  
                            :span-method="arraySpanMethod"
                            :data="item.typeList">
                            <el-table-column 
                                prop=""
                                :label="item.labelName | sliceNumbers">
                                <el-table-column prop="infoTypeName" label=" " align="center"></el-table-column>
                                <el-table-column prop="organizationCode" label="門店編碼" align="center"></el-table-column>
                                <el-table-column prop="unitDesc" width="120" label="基本計量單位描述" align="center"></el-table-column>
                                <el-table-column prop="controlTypeDesc" label="管控描述" align="center"></el-table-column>
                                <el-table-column prop="brand" label="品牌" align="center"></el-table-column>
                                <el-table-column prop="specs" label="規格" align="center"></el-table-column>
                                <el-table-column prop="goodsModel" label="型號" align="center"></el-table-column>
                                <el-table-column prop="isHighValue" label="高低值" align="center"></el-table-column>
                                <el-table-column prop="batchSwitch" label="批次管理" align="center"></el-table-column>
                                <el-table-column prop="isBargain" label="是否划扣" align="center"></el-table-column>
                                <el-table-column prop="effectiveDate" width="100" label="有效期" align="center"></el-table-column>
                                <el-table-column prop="locationTypeDesc" label="庫存來源" align="center"></el-table-column>
                                <el-table-column prop="stockAddressDesc" label="倉庫編碼" align="center"></el-table-column>
                                <el-table-column prop="amount" label="申請/發放數量" align="center"></el-table-column>
                            </el-table-column>
                            <el-table-column :label="item.statusDesc" align="center">
                                <el-table-column align="center" label="操作">
                                    <template slot-scope="scope">
                                        <el-button
                                            v-show="scope.row.buttonType == 1"
                                            :disabled="scope.row.buttonStatus == 0"
                                            @click="handleClick('provide',{index:scope.$index,data:scope.row})"
                                            type="text"
                                            v-preventReClick
                                            size="small">
                                            發放
                                        </el-button>
                                        <el-button
                                            v-show="scope.row.buttonType == 2"
                                            :disabled="scope.row.buttonStatus == 0"
                                            @click="handleClick('amend',{index:scope.$index,data:scope.row})"
                                            type="text"
                                            v-preventReClick
                                            size="small">
                                            修改
                                        </el-button>
                                        <el-button
                                            v-show="scope.row.buttonType == 3"
                                            :disabled="scope.row.buttonStatus == 0"
                                            v-preventReClick
                                            @click="handleClick('delete',{index:scope.$index,data:scope.row})"
                                            type="text"
                                            size="small">
                                            刪除
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table-column>
                        </el-table>
                    </el-row>

js部分：

 this.$get(window.jxLocal,params).then(res=>{
                this.detailData = res.data;
                if(this.detailData.length>0){
                    this.detailData.forEach(item =>{
                        this.$set(item,'labelName',(item.materialCode+item.materialDesc))
                        if(item.typeList && item.typeList.length>0){ 
                            item.typeList = this.handleTableArr(item.typeList)
                        }
                    });
                }
            })

初始化后台返回的數據

   // 初始化詳情表格數據格式
        handleTableArr(data){
            let arr = [];
            data.forEach(element => {
                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;
        },

表格合並方法：

 // 表格合並的方法
        arraySpanMethod({row, column, rowIndex, columnIndex}) {
            // 第一列
            if (columnIndex === 0){
                if (row.count){
                    return [row.count, 1]
                }else{
                    return [0, 0]
                }
            }
        },