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

Element UI 的 el-table 是一个强大的数据表格组件，提供多种功能以满足各种复杂的业务场景。其中，el-table 的 fixed 属性可以将指定的列固定在表格的左侧或右侧，实现冻结列的效果。然而，在使用 fixed 属性时，我们可能会发现一个奇怪的现象：table 的根节点会丢失 el-table--enable-row-hover 类名。

要了解这个问题，我们需要深入探究 el-table 的内部实现。el-table 的 HTML 结构如下所示：

<div class="el-table">
  <div class="el-table__header-wrapper">
    <table class="el-table__header"></table>
  </div>
  <div class="el-table__body-wrapper">
    <table class="el-table__body"></table>
  </div>
</div>

其中，el-table__header 是表格的头部，el-table__body 是表格的主体。el-table--enable-row-hover 类名就位于 el-table__body 的 table 标签上。

当我们给某一列添加 fixed 属性时，el-table 会将该列的 HTML 代码移动到一个单独的 table 中，并将其插入到 el-table__header 和 el-table__body 之间。这个单独的 table 也会拥有 el-table__header 和 el-table__body 类名，但它不会拥有 el-table--enable-row-hover 类名。

为什么 el-table 会这样做呢？这是因为 el-table 需要将固定列的宽度与其他列的宽度分开计算。如果固定列的宽度与其他列的宽度不一致，那么表格就会出现错位的情况。因此，el-table 将固定列移动到一个单独的 table 中，这样就可以独立计算固定列的宽度，而不会影响其他列的宽度。

那么，我们如何解决这个问题呢？我们可以通过 CSS 来重新添加 el-table--enable-row-hover 类名。具体做法如下：

.el-table__body-wrapper {
  background-color: #fff !important;
}

.el-table__body {
  background-color: #fff !important;
}

.el-table__body-wrapper table {
  background-color: #fff !important;
}

通过添加这些 CSS 样式，我们可以将 el-table--enable-row-hover 类名重新添加到 table 的根节点上，从而恢复表格的悬停效果。

希望这篇文章能够帮助您理解为什么在 el-table 中给某一列添加 fixed 属性会导致 table 的根节点丢失 el-table--enable-row-hover 类名，以及如何解决这个问题。