el-table 鼠标移入改变标头以及行的颜色

公司需求记录: 鼠标移入 xy轴实现选中颜色

 

重点： 

@cell-mouse-enter="handleCellenter"

@cell-mouse-leave="handleCellLeave"

// 表格选中

handleCellenter(row, column, cell, event) {

var element = document.querySelectorAll(`.${column.id}`);

for(let i = 0; i < element.length; i++){

element[i].style.backgroundColor = 'pink';

}

},

// 表格Leave

handleCellLeave(row, column, cell, event) {

var element = document.querySelectorAll(`.${column.id}`);

for(let i = 0; i < element.length; i++){

element[i].style.backgroundColor = '#fff';

if (element[i].classList.contains('is-leaf')) {

element[i].style.backgroundColor = '#EEF9FF';

}

}

},

特记： 一定要把行业设置 !important;

.el-table__body tr:hover > td {

background-color: pink !important;

// color: dodgerblue; /* 设置文字颜色，可以选择不设置 */

}