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

}

}

}

}

相关推荐
小雨下雨的雨1 分钟前
鸿蒙PC用Electron框架 实现 房产交易系统核心算法深度解析
前端·javascript·算法·华为·electron·鸿蒙系统
snow@li1 分钟前
前端:本地电脑和服务器,本质上都是一台计算机。
运维·服务器·前端
吹个口哨写代码7 分钟前
IIS 部署 Vue/React 单页应用 (SPA) 刷新页面 404/403.18 报错原因及终极解决方案
前端·vue.js·react.js
向日的葵0068 分钟前
前端生成实战手册:从提示词到高完成度页面
前端·页面设计
粉末的沉淀8 分钟前
前端:谷歌浏览器拒绝自动播放语音
前端
LongJ_Sir9 分钟前
Cesium-浅水方程的简单实现
javascript
爱学习的程序媛11 分钟前
Flutter 深度解析:从技术内核到名企实践
前端·flutter·前端框架
丷丩15 分钟前
MapLibre GL JS第36课:一个Source配置多个图层样式
javascript·gis·map·mapbox·maplibre gl js
Moment18 分钟前
为什么 Tiptap 做协同编辑离不开 Hocuspocus❓❓❓
前端·后端·面试
老毛肚27 分钟前
jeecgboot vue Pinia 拆分01
前端·javascript·vue.js