elementUI中table点击高亮当前行的两种方式

elementUI中table点击⾼亮当前⾏的两种⽅式
1、highlight-current-row
设置css：
tr.current-row > td,
.el-table__body tr:hover > td {
background: #f5f5f5;
}
2、:row-class-name="tableRowClassName"，需要借助@row-click="handleRowClick"获取当前点击⾏的下标
data中定义：
data() {
return {
tableRowIndex: 0
}
}
methods中定义tableRowClassName函数：
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;
}
设置css：
tr.highlight-row td {
background-color: #fffbe0;
color: #06aea6;
}
这两种⽅法的区别：
需求：设置初始化时第⼀⾏⾼亮
第⼀种⽅法需要设置⼀个类名定义好样式，默认为true即显⽰，当点击任⼀⾏时将该类设置为false即不显⽰；第⼆种⽅法只需在data中定义tableRowIndex的初始值为0，即默认展⽰第⼀条，当点击任⼀⾏时，由handleRowClick()⽅法记录下当前⾏的下标。

x。