iview table 表格合并行鼠标悬停时的高亮显示

背景：

Iview里面的表格没有提供鼠标移入移出的事件。

而且当开启鼠标悬浮高亮的时候会显示异常，并没有高亮合并后的整行，还是高亮子行。

高亮前：

 

 高亮异常情况：

  

解决后：

解决方案：

一、思路：

可以给合并行中的每行设置相同的类名，也就是相同类名表示同一行。

然后给每一行绑定鼠标移入移出事件。

二、表格配置项：

1、给表格设置disabled-hover。

2、利用row-class-name属性给表格行绑定类名。

3、给表格设置数据之后，给表格行绑定移入移出事件。

具体代码： 

rowClassName(row) {
       // row.index 合并行中的子行index是相同的
      return `row-class-name index-${row.index}`;
},
getTableData(tableData) {
      this.tableData = tableData; 
      this.addHoverEvent();      
},
addHoverEvent() {
      this.$nextTick(() => {
        try {
          let rowList = document.querySelectorAll('.row-class-name');
          const getTargetRow = (e) => {
            let classList = e.target.classList;
            let className = '';
            let targetRow = null;
            for (let classItem of classList) {
              if (classItem.includes('index-')) {
                className = classItem;
              }
            }
            if (className) {
              targetRow = document.querySelectorAll(`.${className}`);
            }
            return targetRow
          }
          for (let item of rowList) {
            item.addEventListener('mouseenter', (e) => {
              let targetRow = getTargetRow(e) || [];
              for (let rowItem of targetRow) {
                rowItem.className += " active-row";
              }
            })
            item.addEventListener('mouseleave', (e) => {
              let targetRow = getTargetRow(e) || [];
              for (let rowItem of targetRow) {
                rowItem.classList.remove("active-row");
              }
            })
          }
        } catch (e) {}
      })
},

/deep/.active-row td{
  background-color: #ebf7ff;
}