element UI多级表格展示

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;
  }
}

这样就可以实现啦！！