element表格组件el-table行设置背景颜色

秋里同学

已于 2024-04-15 17:23:34 修改

阅读量6.6k

点赞数 18

文章标签： vue.js elementui javascript

于 2024-04-15 17:21:17 首次发布

本文链接：https://blog.youkuaiyun.com/qq_40673807/article/details/137786780

版权

本文介绍了如何使用VueElementUI的el-table组件动态设置表格行和特定单元格的背景颜色，包括使用row-class-name和cell-class-name属性，以及根据数据条件进行颜色切换的示例和关键代码片段。

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

el-table给表格中的行设置背景颜色 elemen官方文档提供了一个示例查看官方示例如下所示

在这里插入图片描述

这里实现比较简单具体代码如下：
关键字是这个:row-class-name=“tableRowClassName”

<el-table
	:data="tableData"
	border
	style="width: 100%"
	align="center"
	:row-class-name="tableRowClassName"
>
      <el-table-column prop="date" label="工单编号" align="center"></el-table-column>
      <el-table-column prop="name" label="产品名称" align="center"></el-table-column>
      <el-table-column prop="address" label="状态" align="center"></el-table-column>
</el-table>

添加style样式改成自己需要的颜色就好了

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

关键JavaScript代码
这里的rowIndex 代表的是表格中的行除开表头从0开始数 return出去在style中对应的样式
不过这里是静态的添加背景色

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

我们可以通过拿row中的数据来根据对应条件添加背景色
row则代表表格行中的数据根据自己需要的条件修改

tableRowClassName({ row, rowIndex }) {
      if(row.name == '阳光男孩'){
        return 'warning-row'
      }
    }

效果如下
在这里插入图片描述

官网给出的例子只有一整行的背景色添加假如我想从产品名称开始添加背景色则需要用到另外个方法

在这里插入图片描述
看一下效果
这里从最后一行的第二列开始才设置背景颜色

代码如下
HTML还是和上面一样只是把row-class-name换成cell-class-name

<el-table
	:data="tableData"
	border
	style="width: 100%"
	align="center"
	:cell-class-name="tableRowClassName"
>
      <el-table-column prop="date" label="工单编号" align="center"></el-table-column>
      <el-table-column prop="name" label="产品名称" align="center"></el-table-column>
      <el-table-column prop="address" label="状态" align="center"></el-table-column>
</el-table>

关键JavaScript代码
这里多了个columnIndex 代表的是列数最左侧从0开始当列数大于或等于1并且row.name是阳光男孩则会添加这个背景色

methods: {
   tableRowClassName({ row, rowIndex, columnIndex }) {
      if (
        columnIndex >= 1 &&
        row.name == "阳光男孩"
      ) {
        return "success-row";
      }
    }
  }