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

}

}

}

}

相关推荐
巴巴_羊17 分钟前
React Redux
开发语言·前端·javascript
Mintopia18 分钟前
Node.js 中的this
前端·javascript·node.js
Mike_jia19 分钟前
一篇文章带你了解一款强大的开源跨平台远程桌面管理工具---XPipe
前端·开源
._Ha!n.21 分钟前
React基础知识一
前端·react.js
Mintopia23 分钟前
深入理解 Three.js 中 Shader 的使用及示例
前端·javascript·three.js
睡觉zzz25 分钟前
React写ai聊天对话,如何实现聊天makedown输出转化
前端·人工智能·react.js
iOS阿玮26 分钟前
截止目前已有15.6w应用惨遭下架,你的应用还好么?
前端·app·apple
半旧51826 分钟前
【重构谷粒商城12】npm快速入门
前端·重构·npm
snakeshe101029 分钟前
剖析 React Commit 阶段:详解工作流程与三大核心模块
前端
爱生活的前端狗30 分钟前
一次大批量处理视频文件的性能优化记录
前端·javascript·vue.js