element-ui表格-设置表头样式-header-row-class-name

最新推荐文章于 2025-05-02 11:10:28 发布

weixin_45822022

最新推荐文章于 2025-05-02 11:10:28 发布

阅读量2.2w

点赞数 8

文章标签： css vue.js 前端

本文链接：https://blog.csdn.net/weixin_45822022/article/details/104781034

版权

本文介绍了在使用Element UI时遇到的多级表头和隔行换色问题的解决方法。通过`header-row-class-name`属性，实现了表头样式的自定义，解决了仅能改变表体行颜色的困扰。这是一个优雅地解决前端表格样式问题的实践案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天遇到了一个小小的问题，要实现如下效果
在这里插入图片描述
多级表头和隔行换色，捣鼓半天没弄好，问了一下群里的大佬，说是可以通过row-class-name给表格行添加类名解决，
官网demo：。按照demo的方法试了半天，没有效果，审查元素发现，类名加在了表体的tr中,按照下边的代码可以改变表体某一行的颜色。

.el-table>>> .success-row td {
    background: #edf6fb!important;
  }

但是，这样并没有解决问题啊，我是想改变两行表头的颜色啊，，，，又又又想了一个很俗气的办法，找到表头行的类手动添加样式，亲测有效

 /* /deep/.el-table /deep/thead>tr:first-child th{
      background: rgb(240,240,240)!important
  }
   /deep/.el-table /deep/thead>tr:last-child th{
      background-color: #edf6fb!important;
  } */

但但是，还是想找个不那么俗气的方法，接着去官网找，发现还有一个带header的属性header-row-class-name，直接贴代码了

<el-table  :data="tableData3" border stripe ref="tableData" :header-row-class-name="tableRowClassName">

tableRowClassName({row, rowIndex}) {
         console.log(rowIndex)
        if (rowIndex === 0) {
          return 'warning-row';
        } else if (rowIndex === 1) {
          return 'success-row';
        }
        return '';
      },

.el-table>>> .warning-row th {
    background: rgb(240,240,240)!important
  }

  .el-table>>> .success-row th {
    background: #edf6fb!important;
  }

到此解决了，应该还有很多很多方法，等着慢慢发现啦~~~