elementUI table 多级表头隔行变背景颜色
效果图如下：
代码如下：
其中rowIndex == 0 意思为多级表头的第一行，columnIndex == 0 意思为某一行的第一列
如 rowIndex == 0， columnIndex == 1 的意思为多级表头的第一行中的第二列 指在上效果图中 激活指标
如 rowIndex == 1， columnIndex == 2 的意思为多级表头的第二行中的第三列 指在上效果图中 返厂设备数
:header-cell-style="setTitle"
methods: {
setTitle({ row, column, rowIndex, columnIndex }) {
if (rowIndex == 0) {
if (
columnIndex == 5 ||
columnIndex == 7 ||
columnIndex == 9 ||
columnIndex == 11 ||
columnIndex == 13
) {
return "background: #deedf3; color: #232323";
}
} else if (rowIndex == 1) {
if (
columnIndex == 0 ||
columnIndex == 1 ||
columnIndex == 2 ||
columnIndex == 9 ||
columnIndex == 10 ||
columnIndex == 11 ||
columnIndex == 12 ||
columnIndex == 16 ||
columnIndex == 17 ||
columnIndex == 18 ||
columnIndex == 26 ||
columnIndex == 27 ||
columnIndex == 28 ||
columnIndex == 29 ||
columnIndex == 30 ||
columnIndex == 31 ||
columnIndex == 32 ||
columnIndex == 34
) {
return "background: #deedf3; color: #232323";
}
}
}
}