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 属性来动态地返回类名。

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

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

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

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

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