element ui table表格添加选中行高亮效果_table选中行高亮

 

table中有一个属性    highlight-current-row 可以实现表格当前选中的行高亮效果

但是有些时候我们不是通过点击但是想要触发他的点击事件 类似于实现一种'trigeer'的效果

所以我选择了用  row-click点击事件 和 添加row-class-name属性 

首先写一个函数可以获取元素在数组中的下标

  // 获取一个元素在数组中的下标
      getArrayIndex(arr, obj) {
        var i = arr.length;
        while (i--) {
          if (arr[i] === obj) {
            return i;
          }
        }
        return -1;
      },

 // 点击表格中的某一行---行的 class的回调方法
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === this.tableRowIndex) {
          return 'current-row'
        }
        return ''
      },

  // 点击表格中的一行
      tableItemClick(row, event, column) {
        this.tableRowIndex = this.getArrayIndex(this.patientTable, row); // 获取当前点击行下标
        this.getList();
      },

 我们可以通过直接给data中的tableRowIndex 赋值，即可给行添加高亮效果