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

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

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

element-ui 表格合并之后鼠标hover效果_第1张图片
image.png

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

element-ui 表格合并之后鼠标hover效果_第2张图片
image.png

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

具体实现思路如下:

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

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

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

  • 鼠标移开事件重置this.cellIndex

以下是实现代码



你可能感兴趣的:(element-ui 表格合并之后鼠标hover效果)