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

}

}

}

}

相关推荐
子兮曰几秒前
AI Agent 完整入门指南:从 LLM 到生产落地的 30+ 个核心概念
前端·后端·agent
三十而立洋12 分钟前
Promise到底是什么、怎么用
javascript
楚宝ovo15 分钟前
新增一个 demo 子应用 - 微前端
前端
JarvanMo1 小时前
Dart 3.13:小版本,大动作
前端
纯粹的热爱1 小时前
Ubuntu 安装 Node.js 22.x(通过 NodeSource 官方源)
前端
Highcharts1 小时前
如何选择正确的图表:驱动理解和洞察力的三部分框架(第3部分)
前端·数据可视化
JavaGuide2 小时前
Github 史诗级故障,与此同时,Cursor 版「GitHub」正式上线!
前端·后端
郭邯2 小时前
用 AI 写了一个经纬度格式转换工具,从需求到落地的完整过程
前端
不一样的少年_2 小时前
修了 Bug、做了重构,为什么老板还是觉得你没产出?
前端·后端·程序员