Element-UI el-table属性row-class-name用法

---

前言

可以通过指定 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 下

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

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

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

先看看是不是加了 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，并设置优先级

效果如图：

设置字体颜色

效果如图：

总结

使用后没有效果的问题！！！

第一步：看看 class 有没有加上去

第二步：如果 class 都加上去了也没有效果，看一下有没有使用 stripe 这个属性，这个属性是带斑马纹的表格样式，它和 row-class-name 共存时是没有效果滴

第三步：如果你也没有使用到 stripe 这个属性，那就要找样式的问题啦

第四步：要 stripe 属性又要 row-class-name 属性，就要设置样式优先级（一定要加td 否则不生效）