Vue复杂表头动态生成＜来自转载＞

 

<el-table   v-for="(tdata,index) in tableData" :key="index"   :data="tdata.result">
                    <el-table-column
                      :prop="item.prop"
                      :label="item.label"
                      :key="k" v-for="(item,k) in tdata.tableHeader">
                      <span v-if="item.child">
                          <el-table-column
                             :prop="son.prop"
                            :label="son.label"
                             :key="'s'+k" v-for="(son,k) in item.child" >
                          </el-table-column>
                      </span>
                    </el-table-column>
                </el-table>

    

drawTable(res){
                const { resSamplesList , positiveList, negativeList,  blankList , itemList } = res;
                let column = 4  //一行四个一级表头
                let tableNum =  Math.ceil( itemList.length / column )
                for(let i = 0; i < tableNum; i++){
                    let tableJson = {}
                    var tableHeader = []  //表头
                    var tableRes = []  // table结果 集合
                    tableHeader.push({
                        label:'序号',
                        prop:'num'
                    },
                    {
                        label:'原始编号',
                        prop:'sampleCustomNo'
                    })

                    for( let j = 0 ; j < column; j++){
                        if(itemList[i * column + j]){
                            let headerJson = {}
                            headerJson.label = itemList[i * column + j].itemName || ''
                            if ( itemList[i * column + j].columnCount == 1 ) {
                                headerJson.child = [{
                                    label: '判定',  //itemList[i * column + j].columnRes,
                                    prop:`res${j}`
                                }]
                            }else{
                                headerJson.child =[
                                    {
                                        label: '判定',   //itemList[i * column + j].columnRes,
                                        prop:`res${j}`
                                    },
                                {
                                    label: '循环数', //itemList[i * column + j].columnCycles,
                                    prop:`cycles${j}`
                                },

                                {
                                    label: '拷贝数', //itemList[i * column + j].columnParam,
                                    prop:`copy${j}`
                                }

                                ]
                            }
                            tableHeader.push(headerJson)
                        }
                    }

                    for( let k = 0; k < resSamplesList.length; k++){
                        let resJson = {} // 结果信息
                        resJson.num = k + 1
                        resJson.sampleCustomNo =  resSamplesList[k].sampleCustomNo;
                        let sItemLen =  resSamplesList[k].sampleResultKys;
                        for( let m = 0 ; m < column; m++){
                            if(sItemLen[column * i + m]){
                                resJson[`copy${m}`] = sItemLen[column * i + m].copyNumber || ''
                                resJson[`res${m}`] = sItemLen[column * i + m].res || ''
                                resJson[`cycles${m}`] = sItemLen[column * i + m].cycleNumber || ''
                            }

                        }
                        tableRes.push(resJson)
                    }
                    let yangxdzJson = {}
                    let yinxdzJson = {}
                    let nulldzJson = {}

                    let  len = tableRes.length;
                    for( let n = 0; n < column; n++){
                        yangxdzJson.num = len + 2;
                        yangxdzJson.sampleCustomNo =  '阳性对照'
                        yinxdzJson.num = len + 1;
                        yinxdzJson.sampleCustomNo =  '阴性对照'
                        nulldzJson.num = len + 3;
                        nulldzJson.sampleCustomNo =  '空白对照'
                        if(positiveList[column * i + n]){
                            yangxdzJson[`copy${n}`] = positiveList[column * i + n].copyNumber || ''
                            yangxdzJson[`res${n}`] =  positiveList[column * i + n].res || ''
                            yangxdzJson[`cycles${n}`] =  positiveList[column * i + n].cycleNumber || ''
                        }
                        if(negativeList[column * i + n]){
                            yinxdzJson[`copy${n}`] = negativeList[column * i + n].copyNumber || ''
                            yinxdzJson[`res${n}`] =  negativeList[column * i + n].res || ''
                            yinxdzJson[`cycles${n}`] =  negativeList[column * i + n].cycleNumber || ''
                        }
                        if(blankList[column * i + n]){
                            nulldzJson[`copy${n}`] = blankList[column * i + n].copyNumber || ''
                            nulldzJson[`res${n}`] =  blankList[column * i + n].res || ''
                            nulldzJson[`cycles${n}`] =  blankList[column * i + n].cycleNumber || ''
                        }
                    }
                    tableRes.push(yinxdzJson)
                    tableRes.push(yangxdzJson)
                    tableRes.push(nulldzJson)
                    tableJson.tableHeader = tableHeader
                    tableJson.result = tableRes;
                    this.tableData.push(tableJson)
                }
        },

转载博主：博客园「橙云生」

原文链接：vue 表格复杂表头的动态生成 - 橙云生 - 博客园