一、@cell-mouse-enter、@cell-mouse-leave、:row-class-name
<el-table
@cell-mouse-enter="cellMouseEnter"
@cell-mouse-leave="cellMouseLeave"
:row-class-name="tableRowClassName" >
二、定义一个空的属性
data() {
return {
hoverIndex:null
}
},
三、通过鼠标移入和移出给hoverIndex赋值,给悬浮的tr添加class="hover-bg"
tableRowClass({row}){
if (this.hoverIndex == row.index) {
return "hover-bg";
}
},
// ⿏标移⼊表格行
cellMouseEnter(row, column, cell, event) {
this.hoverIndex = row.index;
},
// ⿏标移出表格行
cellMouseLeave() {
this.hoverIndex = null;
}
四、给hover-bg下的td修改背景色
/deep/ .el-table__body .el-table__row.hover-bg td{
background-color: #DEE0E5 !important;
}