el-table更改某行背景及文字样式

最新推荐文章于 2025-03-27 14:46:53 发布

原创最新推荐文章于 2025-03-27 14:46:53 发布

· 938 阅读

1 ·

版权

文章标签：

#elementui

ElementUI 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在elementUI的table组件中实现行样式的动态更改。通过为el-table添加row-class-name属性并定义相应的回调函数，可以根据数据字段判断行的样式。例如，当orderTimeFlag字段为1时，将行设置为红色，并调整字体大小和颜色。同时，使用了::v-deep选择器来覆盖默认样式，增强了行的视觉效果。

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

elementUI中 table 中更改某行样式

1、el-table标签添加 属性 :row-class-name="tableRowClassName"

2、定义属性方法
//row是获取到某一行的数据 orderTimeFlag 是我列表数据中的一个字段
//用来判断哪些行需要颜色改变
tableRowClassName({ row }) {
   if (row.orderTimeFlag == "1") {
        return "red-row";
   }
},

3、设置背景颜色及其他样式
//    /deep/ 新的使用方法
::v-deep {
  .el-table .red-row {
    font-size: 12px;
    font-weight: 700;
    color: red !important;
  }
}