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

}

}

}

}

相关推荐
user62229864925815 小时前
React 常用技术知识全景:从组件到 Hooks 的系统理解
前端
麻辣凉茶5 小时前
给阿嬤一封来自云端的信(上)
前端·node.js
前端缘梦5 小时前
LangGraph 实战:从 0 到 1 构建 AI 代码生成工作流
前端·程序员·全栈
weedsfly6 小时前
栈和堆:JavaScript 内存的“旅馆”和“仓库”
前端·javascript·面试
用户059540174466 小时前
大模型长上下文遗忘排查实录:用 Playwright 自动化测试,揪出了 90% 的存储序列化 bug
前端·css
3630458416 小时前
Signal 带来的架构问题思考
前端·vue.js
达达尼昂6 小时前
Claude : 如何设计可控的agent-loops
前端·人工智能·后端
半个落月6 小时前
JavaScript 字符串面试题:反转、回文与双指针
javascript
IT_陈寒6 小时前
Redis持久化丢失数据的坑,这次终于被我填平了
前端·人工智能·后端