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;
}
参考：文章来源：https://www.toymoban.com/news/detail-842042.html
elementUI中table点击高亮当前行的两种方式文章来源地址https://www.toymoban.com/news/detail-842042.html
到了这里，关于[element-ui] el-table点击高亮当前行的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
