实验室报告有表格预览, 会把不确定个数的检测项目和检测指标结果展示出来,
动态实现多个二级表头, 一行不够 多个表格换行.
1. 效果如图:
代码如下:
- <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)
- }
- },
来源: http://www.bubuko.com/infodetail-3368282.html