element-ui 表格合并之后鼠标hover效果

element-ui 表格合并之后鼠标hover效果
这次主要介绍行合并后的hover效果处理，由于element-ui合并行之后，鼠标经过时，默认只会高亮第一行，如下图：

但实际我们想要的是，在鼠标经过这一合并行时，被合并的行都是高亮状态，而不是只有第一行单元格高亮

通过查看表格组件的属性发现，el-ui并没有提供可以直接这样实现的方法，但是我们发现，有一个属性row-class-name，可以实现这种效果。

具体实现思路如下：

给每条数据加一个order，从1开始递增，且将满足合并行条件的数据的order设置为一样的

鼠标进入事件判断鼠标进入哪一个单元格，遍历数据，将和该行的order相等的数据中的order以this.cellIndex变量保存起来

在rowClassName方法中，遍历数据，将每一行row的order和上一步保存的order做对比，相等的情况下，给该行设置类名hover-row

鼠标移开事件重置this.cellIndex

以下是实现代码

<template>
    <el-table
      :data="tableData"
      style="width: 100%"
      :span-method="objectSpanMethod" // 表格合并
      :row-class-name="rowClassName" // 动态给行添加样式
      @cell-mouse-enter="handleMouseEnter" // 单元格移入事件
      @cell-mouse-leave="handleMouseLeave" // 单元格移出事件
        >
      <el-table-column
        type="selection"
        reserve-selection
        width="55">
      </el-table-column>
        ....
    </el-table>
</template>
<script>
export default {
    data() {
        return {
            tableData: [{
              id: '12987122',
              name: '王小虎',
              amount1: '234',
              amount2: '3.2',
              amount3: 10
            }, ...],
            cellIndex: -1,
        }
    },
    created() {
      this.handleData();
    },
    methods: {
        // 合并行
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
              if (rowIndex % 2 === 0) {
                return {
                  rowspan: 2,
                  colspan: 1
                };
              } else {
                return {
                  rowspan: 0,
                  colspan: 0
                };
              }
            }
        },
        // 处理数据, 给每一条数据加order
        handleData() {
            let order = 1;
            let data = this.tableData;
            for (let i=0; i<data.length; i++) {
                if(i === 0) {
                    data[i].order = order;
                } else {
                    if (i % 2 === 0) {
                        // 此处是给相同的数据加相同order，具体判断条件可根据自己数据进行判断
                        data[i]['order'] = data[i - 1]['order'] = data[i]['order']
                          ? data[i]['order']
                          : order;
                    } else {
                        data[i]['order'] = order + 1;
                    }
                }
            }
        }，
        // 鼠标进入单元格
        handleMouseEnter(row, column, cell, event) {
          this.tableData.forEach((item) => {
            if (row.order === item.order) {
              this.cellIndex = row.order;
            }
          })
         },
         // 给相应的rowIndex添加类名
         rowClassName({ row, rowIndex }) {
          // console.log(row, rowIndex);
           let r = -1;
           this.tableData.forEach((item) => {
             if (this.cellIndex === row.order) {
               r = rowIndex;
             }
           });
           if (rowIndex === r) {
             return 'hover-row';
           }
         },
         // 鼠标离开
         handleMouseLeave(row, column, cell, event) {
          this.cellIndex = -1;
        }
     }
}
</script>

作者：彼得潘北北
链接：https://www.jianshu.com/p/6c7640bbbdbb
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。