Element-UI 表格行选中后文字变色：自定义样式实现

要实现 Element-UI 表格行选中后文字变颜色，可以通过自定义样式来实现。

首先，在表格的样式中增加一个类名，例如 'highlight-row'，用于表示选中行的样式。可以在 <el-table> 标签上添加一个 'row-class-name' 属性来指定这个类名。

<el-table :data='tableData' row-class-name='highlight-row'>
  <!-- 表格内容 -->
</el-table>

然后，在样式文件中定义 .highlight-row 类的样式，可以使用 color 属性来改变文字颜色。

.highlight-row {
  color: red;
}

这样，当行被选中时，文字的颜色就会变成红色。

注意：如果要实现选中行背景色和文字颜色同时改变，可以使用 ':row-style' 属性来设置行的样式，而不是使用 'row-class-name'。

<el-table :data='tableData' :row-style='highlightRowStyle'>
  <!-- 表格内容 -->
</el-table>

data() {
  return {
    tableData: [],
  };
},
methods: {
  highlightRowStyle({ row, rowIndex }) {
    return row.selected ? { backgroundColor: 'red', color: 'white' } : {};
  },
},

在这种方式下，需要在数据中维护一个 'selected' 字段来表示行是否被选中，然后在 highlightRowStyle 方法中根据这个字段来设置行的样式。