element-ui表格嵌套表格，鼠标移入时样式错乱-问题调研及处理办法

一、问题场景

当外层表格使用了fixed="right"属性后，鼠标移入时，高亮的样式发生错乱

js 复制代码

  <el-table :data="tableData">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-table :data="tableDataInner">
          <el-table-column prop="date" label="日期" width="180"> </el-table-column>
          <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
          <el-table-column prop="address" label="地址"> </el-table-column>
        </el-table>
      </template>
    </el-table-column>
    <el-table-column label="商品 ID" prop="id" min-width="200"> </el-table-column>
    <el-table-column label="商品名称" prop="name" min-width="200"> </el-table-column>
    <el-table-column label="描述" prop="desc" min-width="200"> </el-table-column>
    <el-table-column label="描述" prop="desc" min-width="200"> </el-table-column>
    <el-table-column label="描述" prop="desc" min-width="200"> </el-table-column>
    <el-table-column label="描述" prop="desc" min-width="200" fixed="right">
    </el-table-column>
  </el-table>

鼠标移入到红色框时，红色框没有高亮，绿色框高亮了。原因是element-ui在计算的时候发生错误，hover-row类名错误地添加到绿色框元素上了。（github.com/ElemeFE/ele...）

二、处理思路

先禁掉hover-row类的高亮效果
通过js的鼠标移入移出事件，给当前行添加或删除active类名，实现高亮效果

三、关键代码

给设置浮动列的表格添加一个类名（orderTable）

js 复制代码

<style lang="scss" scoped>
  .orderTable {
    // hover-row类渲染错误，去掉该样式效果
    ::v-deep .hover-row > td.el-table__cell {
      background-color: transparent;
    }
    // 设置active类名，通过js鼠标移入移出事件，动态添加或删除active类实现高亮效果
    ::v-deep tr.active td.el-table__cell {
      background-color: #f5f7fa !important;
    }
  }
</style>

再添加2个事件

js 复制代码

        @cell-mouse-enter="handleCellMouseEnter"
        @cell-mouse-leave="handleCellMouseLeave"


      // 鼠标移入触发
      handleCellMouseEnter(row, column, cell, event) {
        const parentDom = event.target.parentElement
        parentDom.classList.add('active')
        const trList = parentDom.parentElement.querySelectorAll('tr')
        const index = [...trList].findIndex(tr => [...tr.classList].includes('active'))
        const className =
          column.align === 'is-left'
            ? '.orderTable tbody'
            : '.orderTable .el-table__fixed-body-wrapper tbody'
        const targetTr = document.querySelector(className).querySelectorAll('tr')[index]
        targetTr.classList.add('active')
      },
      // 鼠标移出触发
      handleCellMouseLeave(row, column, cell, event) {
        const classList = ['.orderTable tbody', '.orderTable .el-table__fixed-body-wrapper tbody']
        for (const className of classList) {
          const trList = document.querySelector(className).querySelectorAll('tr')
          for (const tr of trList) {
            tr.classList.remove('active')
          }
        }
      },