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

}

}

}

}

相关推荐
小码哥_常19 小时前
Flutter Android 延迟加载代码指南:提升应用性能的关键
前端
这是个栗子20 小时前
TypeScript(三)
前端·javascript·typescript·react
kvo7f2JTy20 小时前
基于机器学习算法的web入侵检测系统设计与实现
前端·算法·机器学习
北风toto20 小时前
前端CSS样式详细笔记
前端·css·笔记
nanfeiyan20 小时前
git commit
前端
前端精髓1 天前
移除 Effect 依赖
前端·javascript·react.js
码云之上1 天前
从一个截图函数到一个 npm 包——pdf-snapshot 的诞生记
前端·node.js·github
码事漫谈1 天前
AI提效,到底能强到什么程度?
前端·后端
IT_陈寒1 天前
React hooks依赖数组这个坑差点把我埋了
前端·人工智能·后端
阿祖zu1 天前
内容创作 AI 透明化声明倡议与项目开源
前端·后端·github