el-table hover-row 没有生效

el-table 的 hover-row 属性可以用来设置鼠标悬停在表格行上时的样式，可以通过设置 CSS 样式来改变行的颜色。具体实现方法可以参考以下代码：

<el-table :data="tableData" :hover-row-class="'highlight'">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

.highlight {
  background-color: #f5f5f5;
}

在上面的代码中，我们将 hover-row-class 属性设置为 'highlight'，然后在 CSS 样式中定义了 .highlight 类，将背景颜色设置为灰色。这样，当鼠标悬停在表格行上时，该行的背景颜色就会变成灰色。

相关问题

el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition el-table--medium如何去掉

el-table是Element UI框架中的一个表格组件，el-table--fit、el-table--enable-row-hover、el-table--enable-row-transition、el-table--medium是该组件的一些样式类。如果你想去掉这些样式类，可以通过以下方式进行操作：

1. el-table--fit：该样式类用于使表格自适应父容器的宽度。如果你想去掉这个样式类，可以在el-table标签上移除fit属性，或者在样式中将该类的宽度设置为auto。

2. el-table--enable-row-hover：该样式类用于启用鼠标悬停行高亮效果。如果你想去掉这个样式类，可以在el-table标签上移除row-hover属性。

3. el-table--enable-row-transition：该样式类用于启用行过渡效果。如果你想去掉这个样式类，可以在el-table标签上移除row-transition属性。

4. el-table--medium：该样式类用于设置表格的中等大小。如果你想去掉这个样式类，可以在el-table标签上移除size属性，或者将该类的相关样式设置为其他大小。

el-table hover-row改颜色

### 回答1：
el-table 的 hover-row 属性可以用来设置鼠标悬停在表格行上时的样式，可以通过设置 CSS 样式来改变行的颜色。具体实现方法可以参考以下代码：

<el-table :data="tableData" :hover-row-class="'highlight'">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

.highlight {
  background-color: #f5f5f5;
}

在上面的代码中，我们将 hover-row-class 属性设置为 'highlight'，然后在 CSS 样式中定义了 .highlight 类，将背景颜色设置为灰色。这样，当鼠标悬停在表格行上时，该行的背景颜色就会变成灰色。

### 回答2：
要改变el-table中鼠标悬停时行的颜色，可以通过CSS来实现。

首先，在元素的父容器中添加一个CSS类名，如"hover-row"，然后使用如下代码定义该类的样式：

.hover-row .el-table__row:hover {
background-color: #f5f7fa;
}

这样，当鼠标悬停在el-table的某一行上时，这一行的背景颜色就会变为"#f5f7fa"，即颜色改变成功。

接下来，将这个类名应用到el-table的父容器中，可以使用class属性来实现。

例如，假设我们的el-table的父容器是一个div元素，我们可以给这个div添加class属性，如下所示：

<div class="hover-row">
<el-table>
<!--表格内容-->
</el-table>
</div>

这样，当鼠标悬停在el-table行上时，背景颜色就会按照定义的样式改变。

需要注意的是，这里的代码仅仅对于一个el-table生效，如果有多个el-table需要改变颜色，需要分别给它们的父容器添加相应的class属性，并分别定义其样式。

以上就是使用CSS来改变el-table中鼠标悬停行颜色的方法，通过定义一个CSS类，在父容器中应用这个类，然后定义类的样式，即可实现改变颜色的效果。

### 回答3：
要改变el-table中的hover行的颜色，可以使用el-row的hover-class属性。

首先，在el-table的表格组件中，找到要改变颜色的行。然后给该行的class属性添加一个自定义的类名。例如：

<el-table>
<el-table-column>
<!-- 其他列配置 -->
</el-table-column>
<el-table-column>
<!-- 其他列配置 -->
</el-table-column>
...
<!-- 其他行配置 -->
<!-- 需要改变hover颜色的行 -->
<el-table-column>
<template slot-scope="scope">
<el-row :class="{'hover-row': scope.$index === hoverIndex}"
@mouseenter.native="hoverIndex = scope.$index"
@mouseleave.native="hoverIndex = -1">
<!-- 行内容 -->
</el-row>
</template>
</el-table-column>
</el-table>

然后，在css样式中定义.hover-row类的样式，来改变hover行的颜色。

<style scoped lang="scss">
.el-table .hover-row {
background-color: #f5f5f9;
}
</style>

这样，当鼠标悬停在.el-table .hover-row类所对应的行上时，该行的背景色就会变为定义的颜色（#f5f5f9）。而鼠标离开时，背景色又会恢复默认。

希望上述解答能对你有所帮助！