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

}

}

}

}

相关推荐
兆子龙6 小时前
一文彻底搞懂 OpenClaw 的架构设计与运行原理(万字长文)
javascript
leafyyuki6 小时前
用 AI 和 SDD 重构 Vue2 到 Vue3 的实践记录
前端·人工智能
boooooooom7 小时前
别再用错 ref/reactive!90%程序员踩过的响应式坑,一文根治
javascript·vue.js·面试
德育处主任7 小时前
『NAS』一句话生成网页,在NAS部署UPage
前端·javascript·aigc
前端老兵AI7 小时前
前端工程化实战:Vite + ESLint + Prettier + Husky 从零配置(2026最新版)
前端·vite
bluceli7 小时前
浏览器渲染原理与性能优化实战指南
前端·性能优化
张元清7 小时前
Astro 6.0:被 Cloudflare 收购两个月后,这个"静态框架"要重新定义全栈了
前端·javascript·面试
凉拌西红柿7 小时前
如何用工具定位性能瓶颈
前端
青青家的小灰灰7 小时前
深入理解 async/await:现代异步编程的终极解决方案
前端·javascript·面试
阿懂在掘金7 小时前
早点下班(Vue2.7版):旧项目也能少写 40%+ 异步代码
前端·vue.js·开源