前言

可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。

官方示例

在这里插入图片描述

代码如下：

<el-table
  :data="tableData"
  style="width: 100%"
  :row-class-name="tableRowClassName">

定义为第2行为 warning-row 样式，第4行为 success-row 样式

methods: {
  tableRowClassName({ row, rowIndex }) {
    if (rowIndex === 1) {
      return 'warning-row';
    } else if (rowIndex === 3) {
      return 'success-row';
    }
    return '';
  }
},

自定义条件样式

row 是当前行的一个对象，rowIndex 是第几行，起始下标为0，表示第1行

定义样式根据 row.testNum 属性来判断，大于100为 success-row 样式，小于70为 warning-row 样式

methods: {
  tableRowClassName({ row, rowIndex }) {
    if (row.testNum > 100) {
      return 'success-row';
    } else if (row.testNum < 70) {
      return 'warning-row';
    }
    return '';
  }
}

设置背景颜色样式

使用 scoped 设置了样式作用域，这个会影响到 class 的样式

可以尝试使用 /deep/ 深度选择器，必须在 sass 或 less 下

<style rel="stylesheet/scss" lang="scss" scoped>
  /deep/ .el-table .warning-row {
    background: #ffdcdc;
  }
  /deep/ .el-table .success-row {
    background: #d0d3ff;
  }
</style>

或者使用 >>> 深度选择器，只支持css

<style>
  .el-table >>> .warning-row {
    background: #ffdcdc;
  }
  .el-table >>> .success-row {
    background: #d0d3ff;
  }
</style>

我们的样式颜色将会改变，效果如图：

在这里插入图片描述

当我们出现下图所示，达到条件的样式却不生效：

在这里插入图片描述

先看看是不是加了 stripe 属性的原因

<el-table
  :data="tableData"
  style="width: 100%"
  stripe
  :row-class-name="tableRowClassName">

stripe属性可以创建带斑马纹的表格。它接受一个Boolean，默认为false，设置为true即为启用。

stripe属性是带斑马纹的表格样式，它和 row-class-name 共存时是没有效果滴

stripe属性 + 设置背景颜色样式

那么问题来了，我们既要stripe属性设置斑马纹的表格样式，又要 row-class-name 设置背景样式，又该如何应对？

在这里插入图片描述

步骤：

1、要使用深度选择器+td
2、因为table默认有背景色，所以在设置背景色的时要写td，并设置优先级

<style rel="stylesheet/scss" lang="scss" scoped>
  /deep/ .el-table .warning-row td {
    background: #ffdcdc !important;
  }

  /deep/ .el-table .success-row td {
    background: #d0d3ff !important;
  }
</style>

效果如图：

在这里插入图片描述

设置字体颜色

<style rel="stylesheet/scss" lang="scss" scoped>
  /deep/ .el-table .warning-row {
    color: #ff0000;
  }
  /deep/ .el-table .success-row {
    color: #0055ff;
  }
</style>