element-ui 表格合并之后鼠标hover效果
这次主要介绍行合并后的hover效果处理，由于element-ui合并行之后，鼠标经过时，默认只会高亮第一行，如下图：
image.png
但实际我们想要的是，在鼠标经过这一合并行时，被合并的行都是高亮状态，而不是只有第一行单元格高亮
image.png
通过查看表格组件的属性发现，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>
