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

今天遇到了一个小小的问题，要实现如下效果

多级表头和隔行换色，捣鼓半天没弄好，问了一下群里的大佬，说是可以通过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，直接贴代码了

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

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