image.png
因为数据的层级、字段太多了，看的密密麻麻需要前端来优化一下视觉效果与显示效果
表格根据一级分颜色展示需要在el-table标签内加header-cell-style属性
<el-table
:data="tableData.rows"
:header-cell-style="tableHeaderCellStyle">
</el-table>
然后去methods中定义一下tableHeaderCellStyle函数
// 设置表头每行单元格样式
tableHeaderCellStyle({row,column,rowIndex, columnIndex}) {
// 定义多种样式
let cellStyle1, cellStyle2,cellStyle3
cellStyle1= "color: #000;background:#fff"
cellStyle2= "color: #000;background:#dfebf6"
cellStyle3= "color: #000;background:#e4eedb"
// 根据表格中的层级、行、列进行判断
if(rowIndex === 0 && columnIndex === 0){
return cellStyle1;
}
if(rowIndex === 0 && columnIndex === 1 || rowIndex === 1 && columnIndex <= 2 || rowIndex === 2 && columnIndex <= 16 || rowIndex === 3 && columnIndex <= 16){
return cellStyle2;
}
if(rowIndex === 0 && columnIndex === 2 || rowIndex === 1 && columnIndex > 2 || rowIndex === 2 && columnIndex > 16 && columnIndex < 33 || rowIndex === 2 && columnIndex > 34 || rowIndex === 3 && columnIndex > 16 && columnIndex < 33 || rowIndex === 3 && columnIndex > 44){
return cellStyle3;
}
}
这样就可以实现啦！！
