1、highlight-current-row
tr.current-row > td,
.el-table__body tr:hover > td {
background: #f5f5f5;
}
2、:row-class-name=“tableRowClassName”，需要借助@row-click="handleRowClick"获取当前点击行的下标
data() {
return {
tableRowIndex: 0
}
}
handleRowClick(row) {
this.tableRowIndex = this.getArrayIndex(this.tableData, row); // 获取当前点击行下标 // ... 点击当前行，进行的操作 },
tableRowClassName({ row, rowIndex }) {
if (rowIndex === this.tableRowIndex) {
return 'highlight-row'
}
return ''
},
// 获取一个元素在数组中的下标
getArrayIndex(arr, obj) {
var i = arr.length;
while (i--) {
if (arr[i] === obj) {
return i;
}
}
return -1;
}
tr.highlight-row td {
background-color: #fffbe0;
color: #06aea6;
}
参考：
elementUI中table点击高亮当前行的两种方式
