el-table行hover时字体变色样式

在Vue.js的Element UI库中，`el-table`组件是一个用于展示数据表格的强大工具。如果你想让表格中的某一行在鼠标悬停时改变字体颜色，你可以通过CSS或者组件提供的属性来实现。这里有一个简单的例子：

1. 使用CSS（内联样式）：

<template>
  <el-table :data="tableData">
    <el-table-column type="index"></el-table-column>
    <!-- 其他列 -->
    <el-table-row class="hover-row" v-for="(item, index) in tableData" :key="index">
      <template slot-scope="scope">
        <span @mouseenter="scope.row.highlighted = true" @mouseleave="scope.row.highlighted = false">{{ item.content }}</span>
      </template>
    </el-table-row>
  </el-table>
</template>

<style scoped>
.hover-row:hover {
  color: red; /* 更改为你想要的颜色 */
}
.hover-row .highlighted {
  color: blue; /* 鼠标悬浮时的颜色 */
}
</style>

在这个例子中，我们在每个`el-table-row`上添加了`hover-row`类，并监听`mouseenter`和`mouseleave`事件来切换`highlighted`样式。

2. 如果你想保持更简洁的代码结构，可以将CSS样式放在单独的`<style>`标签中，然后使用`:class`动态绑定类名：

<template>
  <el-table :data="tableData">
    <!-- ... -->
    <el-table-row :class="{ 'hovered': row.highlighted }" v-for="(row, index) in tableData" :key="index">
      <!-- ... -->
    </el-table-row>
  </el-table>
</template>

<style>
.hovered {
  color: blue;
}

.hovered:hover {
  color: red;
}
</style>

这样，当`row.highlighted`为真时，该行会显示为蓝色文字，鼠标悬停时变为红色。