vue3 el-table 根据字段值 改变整行字体颜色

在 Vue 3 中使用 Element Plus 的 el-table 组件时，如果你想根据某一列的字段值来改变整行的字体颜色，你可以通过使用自定义的 row-class-name 属性或者通过插槽（slot）的方式来达到目的。以下是两种常见的方法：

方法一：使用 row-class-name 属性

el-table 的 row-class-name 属性允许你为行添加一个类名，基于这个类名，你可以通过 CSS 来改变字体颜色。你可以通过传递一个方法给 row-class-name 属性来动态地返回类名。

<template>
  <el-table
    :data="tableData"
    row-class-name="getRowClassName"
  >
    <el-table-column prop="date" label="日期"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue';
 
const tableData = ref([
  { date: '2023-04-01', name: 'Tom', address: 'New York', status: 'high' },
  { date: '2023-04-02', name: 'Jerry', address: 'Los Angeles', status: 'medium' },
  { date: '2023-04-03', name: 'Bob', address: 'Chicago', status: 'low' }
]);
 
const getRowClassName = ({ row, rowIndex }) => {
  if (row.status === 'high') {
    return 'text-red'; // 这个类名将在CSS中定义颜色
  } else if (row.status === 'medium') {
    return 'text-orange'; // 这个类名将在CSS中定义颜色
  } else {
    return ''; // 其他情况不改变颜色或返回一个空字符串
  }
};
</script>
 
<style>
::v-deep.text-red {
  color: red;
}
::v-deep.text-orange {
  color: orange;
}
</style>

方法二：使用 el-table-column 的 render 插槽自定义内容

虽然这种方法不是直接改变整行字体颜色，但它允许你完全控制单元格的渲染，从而可以间接实现。例如，你可以在每个单元格中使用 span 标签来包裹内容并应用样式。但如果你想改变整行的颜色，通常还是使用 rowClassName 方法更直接。

方法三：使用 CSS 选择器结合数据绑定（更灵活）

如果你想要更灵活地控制行样式，可以在模板中为行添加一个唯一的类名，然后在 JavaScript 中动态设置这个类名。例如：

<template>
  <el-table :data="tableData" :row-class-name="getRowClassName">
    <el-table-column prop="date" label="日期"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue';
 
const tableData = ref([...]); // 数据同上例
const getRowClassName = ({ row, rowIndex }) => {
  return `status-${row.status}`; // 为每行添加一个基于状态的类名
};
</script>
 
<style>
.status-high { color: red; }
.status-medium { color: orange; }
.status-low { color: green; } /* 示例颜色 */
</style>

在这个例子中，我们通过为每行添加一个基于其状态（status）的类名来改变字体颜色，然后在 CSS 中定义这些类名对应的颜色。这种方法提供了更高的灵活性，允许你根据不同的条件为行设置不同的样式。