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

}

}

}

}

相关推荐
csj505 分钟前
前端基础之《React(7)—webpack简介-ESLint集成》
前端·react
Jonathan Star5 分钟前
CSS margin 折叠现象的实际代码示例
javascript·css·css3
咚咚咚小柒10 分钟前
【前端】Webpack相关(长期更新)
前端·javascript·webpack·前端框架·node.js·vue·scss
2501_9160088910 分钟前
前端工具全景实战指南,从开发到调试的效率闭环
android·前端·小程序·https·uni-app·iphone·webview
诸葛韩信12 分钟前
Webpack与Vite的常用配置及主要差异分析
前端·webpack·node.js
IT_陈寒16 分钟前
Vite 5震撼发布!10个新特性让你的开发效率飙升200% 🚀
前端·人工智能·后端
一路向前的月光21 分钟前
uniapp(5)滚动列表scroll-view
前端·javascript·uni-app
Hilaku1 小时前
就因为package.json里少了个^号,我们公司赔了客户十万块
前端·javascript·npm
晴殇i1 小时前
尤雨溪创立的 VoidZero 完成 1250 万美元 A 轮融资,加速整合前端工具链生态
前端·vue.js
一大树1 小时前
MutationObserver 完整用法指南
前端