表头主要复杂在：
1，有三层，一层是大类，第二层是具体项，第三层是标准值/对比值
2，首列和末尾列是一层
3，整个表格的维度是根据数据的输入自己生成，也就是动态的
下面是在 vue + eleUI 中的解决方案：
<el-table :data="tableData" border style="width: 100%" max-height="700" v-loading="areaLoading" element-loading-text="拼命加载中">
<el-table-column fixed label="IP" prop="ip" width="180"></el-table-column>
<el-table-column v-for="(item, index) in itemList" :key="index" :label="item.label">
<el-table-column :label="standard_name" v-for="(standard,standard_name) in item.standard" width="150">
<el-table-column :label="standard" min-width="150">
<template scope="scope">
<span>{
{scope.row.list[item.label][standard_name]['value']}}</span>
</template>
</el-table-column>
</el-table-column>
</el-table-column>
<el-table-column fixed="right" label="验收结果" width="100">
<template scope="scope">
<span :class="{'unqualified-color': !scope.row.result}">{
{scope.row.result ? '合格' : '不合格'}}</span>
</template>
</el-table-column>
</el-table>
其对应data:
//整理出所有的label和标准对象的属性
itemList: [],
//实际数据
tableData：[]
《方法二》
vue+element
html配置:
<
div
id=
"table"
>{
{tableData}}
<
el-table :
data=
"tabledata01" :
span-method=
"tableSpanMethod"
max-height=
"420"
>
<
el-table-column
v-for=
'item in tableConfig' :
label=
"item.label" :
prop=
'item.prop' :
width=
'item.width' :
key=
"item.id"
>
<
el-table-column
v-if=
'item.children||item.children.length>0'
v-for=
"item1 in item.children"
:
label=
"item1.label" :
prop=
'item1.prop' :
width=
'item1.width' :
key=
"item1.id"
>
<
el-table-column
v-if=
'item1.children||item1.children.length>0'
v-for=
"item2 in item1.children"
:
label=
"item2.label" :
prop=
'item2.prop' :
width=
'item2.width' :
key=
"item2.id"
>
</
el-table-column
>
</
el-table-column
>
</
el-table-column
>
</
el-table
>
</
div
>
data:
tableConfig:[
{id:
100,label:
'一级表头',prop:
'',width:
'',children:[
{id:
110,label:
'二级表头1',prop:
'districtName',width:
''},
{id:
120,label:
'二级表头2',prop:
'timeDimension',width:
''}
]},
{id:
200,label:
'一级表头',prop:
'',width:
'',children:[
{id:
210,label:
'二级表头',prop:
'',width:
'',children:[
{id:
211,label:
'三级表头',prop:
'residentPopNum',width:
'110'},
{id:
212,label:
'三级表头',prop:
'residentPopDst',width:
'110'}
]}
]},
{id:
300,label:
'一级表头',prop:
'',width:
'',children:[
{id:
310,label:
'二级表头',prop:
'',width:
'',children:[
{id:
311,label:
'三级表头',prop:
'liveLandArea',width:
'110'},
{id:
312,label:
'三级表头',prop:
'liveLandDst',width:
'110'}
],
},
{id:
320,label:
'二级表头',prop:
'',width:
'',children:[
{id:
321,label:
'三级表头(km²)',prop:
'employmentLandArea',width:
'110'},
{id:
322,label:
'三级表头',prop:
'employmentLandDst',width:
'110'}
],
}
]},
{id:
400,label:
'一级表头',prop:
'',width:
'',children:[
{id:
410,label:
'二级表头',prop:
'',width:
'',children:[
{id:
411,label:
'三级表头(个)',prop:
'regionTrafficHubNum',width:
'110'},
{id:
412,label:
'三级表头(人次/km²)',prop:
'regionTrafficHubFlow',width:
'140'}
],
},
{id:
420,label:
'二级表头',prop:
'',width:
'',children:[
{id:
421,label:
'三级表头(个)',prop:
'highSpeedNum',width:
'110'},
{id:
422,label:
'三级表头(个/km²)',prop:
'highSpeedDst',width:
'140'}
],
},{id:
430,label:
'二级表头',prop:
'',width:
'',children:[
{id:
431,label:
'三级表头(个)',prop:
'trackTrafficSpotNum',width:
'140'},
{id:
432,label:
'三级表头(个/km²)',prop:
'trackTrafficSpotDst',width:
'140'}
],
},
{id:
440,label:
'二级表头',prop:
'',width:
'',children:[
{id:
441,label:
'三级表头(km)',prop:
'trackTrafficNetNum',width:
'110'},
{id:
442,label:
'三级表头(km/km²)',prop:
'trackTrafficNetDst',width:
'140'}
],
},
{id:
450,label:
'二级表头',prop:
'',width:
'',children:[
{id:
451,label:
'三级表头(个)',prop:
'cityTrafficHubNum',width:
'110'},
{id:
452,label:
'三级表头(个/km²)',prop:
'cityTrafficHubDst',width:
'110'},
{id:
453,label:
'三级表头(人次/km²)',prop:
'cityTrafficHubFlow',width:
'140'}
],
},
{id:
460,label:
'二级表头',prop:
'',width:
'',children:[
{id:
461,label:
'三级表头(km)',prop:
'cityTrafficNetNum',width:
'110'},
{id:
462,label:
'三级表头',prop:
'cityTrafficNetDst',width:
'140'}
],
},
]},
{id:
500,label:
'一级表头',prop:
'',width:
'',children:[
{id:
510,label:
'二级表头',prop:
'',width:
'',children:[
{id:
511,label:
'三级表头(km²)',prop:
'pubServeLandArea',width:
'110'},
{id:
512,label:
'三级表头',prop:
'pubServeLandDst',width:
'110'}
],
},
{id:
520,label:
'二级表头',prop:
'',width:
'',children:[
{id:
521,label:
'三级表头(个)',prop:
'hospitalResourcesNum',width:
'110'},
{id:
522,label:
'三级表头(km²)',prop:
'hospitalResourcesArea',width:
'110'},
{id:
523,label:
'三级表头(个/km²)',prop:
'hospitalResourcesDst',width:
'110'}
],
},{id:
530,label:
'二级表头',prop:
'',width:
'',children:[
{id:
531,label:
'三级表头(个)',prop:
'schoolResourcesNum',width:
'110'},
{id:
532,label:
'三级表头(km²)',prop:
'schoolResourcesArea',width:
'110'},
{id:
533,label:
'三级表头(个/km²)',prop:
'schoolResourcesDst',width:
'110'}
],
},
{id:
540,label:
'二级表头',prop:
'',width:
'',children:[
{id:
541,label:
'三级表头(个)',prop:
'humanResourcesNum',width:
'110'},
{id:
542,label:
'三级表头(个/km²)',prop:
'humanResourcesDst',width:
'110'}
],
},
{id:
550,label:
'二级表头',prop:
'',width:
'',children:[
{id:
551,label:
'三级表头(个)',prop:
'businessResourcesNum',width:
'110'},
{id:
552,label:
'三级表头(个/km²)',prop:
'businessResourcesDst',width:
'110'}
],
},
{id:
560,label:
'二级表头',prop:
'',width:
'',children:[
{id:
561,label:
'三级表头(个)',prop:
'environResourcesNum',width:
'110'},
{id:
562,label:
'三级表头(个/km²)',prop:
'environResourcesDst',width:
'110'}
],
},
]},
{id:
600,label:
'一级表头',prop:
'',width:
'',children:[
{id:
610,label:
'二级表头',prop:
'',width:
'',children:[
{id:
611,label:
'三级表头(分)',prop:
'populationScore',width:
'110'},
],
},
{id:
620,label:
'二级表头',prop:
'',width:
'',children:[
{id:
621,label:
'三级表头(分)',prop:
'landScore',width:
'110'},
],
},{id:
630,label:
'二级表头',prop:
'',width:
'',children:[
{id:
631,label:
'三级表头(分)',prop:
'trafficScore',width:
'110'},
],
},
{id:
640,label:
'二级表头',prop:
'',width:
'',c
最低0.47元/天 解锁文章
扫一扫
1969
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
