[element-ui] el-table点击高亮当前行_el-table点击行高亮

1、highlight-current-row

 tr.current-row > td,
    .el-table__body tr:hover > td {
      background: #f5f5f5;
    }
1
2
3
4

2、:row-class-name=“tableRowClassName”，需要借助@row-click="handleRowClick"获取当前点击行的下标

data() {
    return {
      tableRowIndex: 0
    }
  }
1
2
3
4
5

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;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

   tr.highlight-row td {
      background-color: #fffbe0;
      color: #06aea6;
    }
1
2
3
4

参考：

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