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