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