Vue+Element el-table属性row-class-name用法及踩坑

最新推荐文章于 2025-03-26 15:13:20 发布

宛绾啊

最新推荐文章于 2025-03-26 15:13:20 发布

阅读量3w

点赞数 69

文章标签： elementui vue

本文链接：https://blog.csdn.net/weixin_39018944/article/details/113184948

版权

本文介绍如何使用Element UI中的el-table组件通过row-class-name属性来实现特定行样式的自定义，包括不同背景颜色的应用，并分享了实践中遇到的问题及解决方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-table属性row-class-name用法及踩坑

需求前提：想要给表格的某一行加上不同的background，用来区分当前行的状态

在这里插入图片描述

根据官方给出的文档官方文档

在el-table中绑定自定义属性row-class-name

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

在methods中定义方法,这里用来给某一行的状态加上class

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

给自己定义的class设置样式

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

踩坑笔记

使用row.userName 等变量时，值为undefined，这时候要看看在tableRowClassName方法内，参数是个对象，所以要解构再使用啊！
使用后没有效果的问题！！！！！
- 第一步：看看class有没有加上去
- 第二步：如果class都加上去了也没有效果，看一下有没有使用stripe这个属性，这个属性是带斑马纹的表格样式，它和row-class-name共存时是没有效果滴
- 第三步：如果你也没有使用到stripe这个属性，那就要找样式的问题啦
  - 使用scoped设置了样式作用域 ,这个会影响到class的样式
  - 可以尝试使用/deep/深度选择器,必须在sass或less下
```
/deep/ .el-table .warning-row {
    background: oldlace;
  }

/deep/ .el-table .success-row {
    background: #f0f9eb;
  }
```
  - 使用 >>>深度选择器，只支持css
```
.el-table >>> .warning-row {
  background: oldlace;
}
.el-table >>> .success-row {
  background: #f0f9eb;
}
```