el-table 修改鼠标悬停时修改当前行和列的背景色,高亮显示
直接上代码
1)悬停时修改当前行的背景色,如果这样不生效,给el-table手动添加一个类名,然后在加在::v-deep前面
::v-deep .el-table__body tr:hover > td {
background-color: pink !important;
}
2)悬停时修改当前列的背景色
修改列的背景色时不能直接操作css,我是这样写的
cellMouseEnter(e, row, cell, column) {
var selrange = document.getElementsByClassName(row.id)
console.log('row', row)
console.log('cell', cell)
console.log('selrange', selrange)
if (this.formConfig.isNoHoverColor) {
cell.style.backgroundColor = ''
for (var i = 0; i < selrange.length; i++) {
selrange[i].style.backgroundColor = ''
}
} else {
cell.style.backgroundColor = '#e6e8ea'
for (var i = 0; i < selrange.length; i++) {
selrange[i].style.backgroundColor = '#e6e8ea'
}
}
},
以上是el-table自带的鼠标滑入和滑出单元格时触发的方法,其中row为该行的元素信息,只要是同一列的单元格,其id是一样的,可以根据这个线索来修改列的样式,cell是当前单元格,若要改列的话也需要单独修改当前悬停的单元格的样式。我这里的isNoHoverColor是来控制需不需要修改列的背景色,根据需求不同,若业务需求要求所有表格全要修改列的背景色,则可以直接取else里面的代码
3)离开时恢复原始样式
cellMouseLeave(e, row, cell) {
var selrange = document.getElementsByClassName(row.id)
for (var i = 0; i < selrange.length; i++) {
selrange[i].style.backgroundColor = ''
}
}
至此结束!!!