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

}

}

}

}

相关推荐
爱上好庆祝34 分钟前
学习js的第五天
前端·css·学习·html·css3·js
C澒1 小时前
IntelliPro 产研协作平台:基于 AI Agent 的低代码智能化配置方案设计与实现
前端·低代码·ai编程
一袋米扛几楼981 小时前
【Git】规范化协作:详解 GitHub 工作流中的 Issue、Branch 与 Pull Request 最佳实践
前端·git·github·issue
网络点点滴1 小时前
前端与后端的区别与联系
前端
yqcoder1 小时前
JavaScript 柯里化:把“大餐”拆成“小炒”的艺术
开发语言·javascript·ecmascript
每天吃饭的羊1 小时前
JSZip的使用
开发语言·javascript
EnCi Zheng2 小时前
M5-markconv自定义CSS样式指南 [特殊字符]
前端·css·python
kyriewen2 小时前
你的网页慢,用户不说直接走——前端性能监控教你“读心术”
前端·性能优化·监控
广州华水科技2 小时前
北斗GNSS变形监测在大坝安全监测中的应用与优势分析
前端
前端老石人2 小时前
前端开发中的 URL 完全指南
开发语言·前端·javascript·css·html