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

}

}

}

}

相关推荐
向日葵花籽儿5 分钟前
#运维 | 前端 # Linux http.server 实践:隐藏长文件名,简短路径 (http://IP:port/别名 ) 访问
linux·运维·前端
zheshiyangyang18 分钟前
uni-app学习【pages】
前端·学习·uni-app
nightunderblackcat1 小时前
新手向:异步编程入门asyncio最佳实践
前端·数据库·python
前端工作日常1 小时前
我的 Jasmine 入门之旅
前端·单元测试·测试
前端小巷子1 小时前
Vue 3 运行机制
前端·vue.js·面试
yzzzzzzzzzzzzzzzzz8 小时前
JavaScript 操作 DOM
开发语言·javascript·ecmascript
奋斗的小羊羊9 小时前
HTML5关键知识点之多种视频编码工具的使用方法
前端·音视频·html5
前端呆猿9 小时前
深入解析HTML5中的object-fit属性
前端·css·html5
再学一点就睡9 小时前
实现大文件上传全流程详解(补偿版本)
前端·javascript·面试
你的人类朋友10 小时前
【Node&Vue】什么是ECMAScript?
前端·javascript·后端