el-table中怎样设置标题栏颜色以及每一行颜色交替不同的效果

不念不忘少年蓝@ 2022-10-15 04:00 12阅读 0赞

# 场景 #

在Vue中使用el-table显示数据，怎样设置标题栏的颜色和设置每一行

隔一行显示不同的颜色，实现效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi][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样式的实现

row-class-name：行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。

然后row-class-name绑定的样式实现

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: /images/20221014/c93f903d9f174131a8e274298bee0250.png
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi