elementUI table 多级表头隔行变背景颜色

devtools/2025/1/3 3:45:05/

效果图如下:

代码如下:

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

        }

      }

    }

}


http://www.ppmy.cn/devtools/131256.html

相关文章

无人机避障——2D栅格地图pgm格式文件路径规划代码详解

代码和测试效果请看上一篇博客: 无人机避障——使用三维PCD点云生成的2D栅格地图PGM做路径规划-CSDN博客 更换模型文件.dae: 部分模型文件可以从这里下载: https://github.com/ethz-asl/rotors_simulator/wiki 将原先代码中的car.dae文件…

Python爬虫:揭开淘宝商品描述的神秘面纱

在这个信息爆炸的时代,我们每天都在和时间赛跑。作为一名Python开发者,你是否曾梦想拥有超能力,能够瞬间揭开淘宝商品描述的神秘面纱?今天,就让我们一起化身为代码界的“福尔摩斯”,使用Python爬虫技术&…

AUTOSAR CP MCAL微控制器抽象层介绍

AUTOSAR(Automotive Open System Architecture)即汽车开放系统架构,它将汽车电子控制单元(ECU)的软件底层做了一个标准的封装,使得开发者能够共用一套底层软件,并通过修改参数来匹配不同的硬件和应用层软件。AUTOSAR CP(Classic Platform)是AUTOSAR架构中的一个重要组…

《TCP/IP网络编程》学习笔记 | Chapter 3:地址族与数据序列

《TCP/IP网络编程》学习笔记 | Chapter 3:地址族与数据序列 《TCP/IP网络编程》学习笔记 | Chapter 3:地址族与数据序列分配给套接字的IP地址和端口号网络地址网络地址分类和主机地址边界用于区分套接字的端口号数据传输过程示例 地址信息的表示表示IPv4…

【Clikhouse 探秘】ClickHouse 物化视图:加速大数据分析的新利器

👉博主介绍: 博主从事应用安全和大数据领域,有8年研发经验,5年面试官经验,Java技术专家,WEB架构师,阿里云专家博主,华为云云享专家,51CTO 专家博主 ⛪️ 个人社区&#x…

git submodule

文章目录 1.简介2.格式3.选项4.示例5.小结参考文献 1.简介 git submodule 用于管理子模块。 有种情况我们经常会遇到:某个工作中的项目需要包含并使用另一个项目。 也许是第三方库,或者你独立开发的,用于多个父项目的库。 现在问题来了&…

江协科技STM32学习- P25 UART串口协议

🚀write in front🚀 🔎大家好,我是黄桃罐头,希望你看完之后,能对你有所帮助,不足请指正!共同学习交流 🎁欢迎各位→点赞👍 收藏⭐️ 留言📝​…

WebSocket的理解与应用

WebSocket的理解与应用 一、是什么二、特点1、全双工2、二进制帧3、协议名4、握手5、优点 三、应用场景 一、是什么 WebSocket,是一种网络传输协议,位于OSI模型的应用层。可在单个TCP连接上进行全双工通信,能更好的节省服务器资源和带宽并达…