el-table中怎樣設置標題欄顏色以及每一行顏色交替不同的效果

場景

在Vue中使用el-table顯示數據，怎樣設置標題欄的顏色和設置每一行

隔一行顯示不同的顏色，實現效果如下

 

 

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

找到el-table標簽添加如下樣式和屬性設置

    <el-table
      class="alarm"
      v-loading="loading"
      :header-cell-style="{ background: '#0080D0' }"
      :row-class-name="tableRowClassName"
    >

然后class綁定的alarm樣式的實現

<style>
.alarm .el-table__row td:nth-child(10) {
  color: #3be6f8;
}
</style>

row-class-name：行的 className 的回調方法，也可以使用字符串為所有行設置一個固定的 className。

然后row-class-name綁定的樣式實現

    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return "statistics-warning-row";
      } else {
        return "";
      }
    },