element-ui 的 el-table 什么情况下会添加 el-table--enable-row-hover 类名

故事是这样的：

• 领导说线上某个页面表格行hover状态下背景色有问题，说测试没好好测。
• 测试找我说这么明显的问题她不可能没发现，一定是代码后来改动了，改了一个bug上去。
• 我经过简单的代码回看，并没有发现有问题的css方面的改动，于是正常修复此bug。
• 测试说不可能4个人都没有发现，于是去找禅道bug记录，发现1月6号的bug截图中本页面表格行hover状态确实没有问题。

这就确认了一定是后来代码改动导致的。于是，下面就开始分析到底什么改动会导致此bug。

一、分析

首先，经过审查元素发现有问题的表格行hover状态下会给tr动态添加hover-row类名：

没问题的表格行el-table标签有个.el-table--enable-row-hover。

而全局样式正是通过此类名设置正确的样式。

// list.less
.el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: var(--el-table__cell-hover-BackGroundColor, #F5F7FA);
}

所以如果单纯只要改bug，只需要加上以下样式代码就可以：

// list.less
.el-table__body tr.hover-row > td {
    background-color:var(--el-table__cell-hover-BackGroundColor,#F5F7FA) ;
}

但是我得知道为什么之前没问题，后来又有问题了。从两个el-table标签的属性配置并没有发现会导致以上差异的代码。

二、搜索

于是我问了AI：

emmm，不太符合...

三、源码

于是我看向element-ui源码。

1. 通过在./node_modules/element-ui搜索el-table--enable-row-hover，发现element是根据isComplex的属性用动态类名的方式添加的。

2. 于是我再搜索isComplex：

3. 结论出来了：是不是有谁给某个列加了个fixed属性？

   最终找到了某位同事在1月12号的改动记录：

四、总结

el-table中给某一列添加fixed属性会导致table的根节点丢失el-table--enable-row-hover类名

核心代码：

<!-- node_modules\element-ui\packages\table\src\table.vue -->
<div class="el-table" :class="[{'el-table--enable-row-hover': !store.states.isComplex}]"></div>

// node_modules\element-ui\lib\table.js
states.fixedColumns = _columns.filter((column) => column.fixed === true || column.fixed === 'left');
states.rightFixedColumns = _columns.filter((column) => column.fixed === 'right');
states.columns = [].concat(fixedLeafColumns).concat(leafColumns).concat(rightFixedLeafColumns);
states.isComplex = states.fixedColumns.length > 0 || states.rightFixedColumns.length > 0;