解决 Element UI 表格高亮(highlight-cur

前言，在大家使用Element UI的表格的时候需要用到表格的highlight-current-row去让点击的行高亮，但再次点击高亮行却无法取消高亮。在这里，我研究出了一种方法可解决这个问题，方法如下：

首先需要用到el-table的@row-click事件

image.png

代码如下：

 <el-table
        ref="table"
        :data="tableData"
        row-key="id"
        highlight-current-row
        style="width: 100%;"
        @row-click="(row, column, event) => $rowClick(row,column, event, 'table')"
      >
</el-table>

我们这里需要用一个自定义的函数$rowClick（这个函数名按喜好随意），这里的自定义函数接收四个参数，row、column、event、ref（当前表格的ref）。
因为@row-click本身带了参数所以我们需要用把自定义函数包裹在匿名函数里，然后接收它带的参数，再加入新参数ref。

再利用el-table的@setCurrentRow事件

image.png

在当前组件的methods中或Vue.mixin（）的methods中（推荐）写入该方法:

    // 表格切换高亮点击
    $rowClick (row, column, ev, ref) {
     const $table = this.$refs[ref]
      // 因为不知道表格中包裹了多少层元素,所以需要通过查询点击元素的所有父级元素找到符合条件的类名进行判断
      const haveHeightLight = [...ev.path].some(el => {
        if (el.classList) return [...el.classList].indexOf('el-table__row') !== -1 && [...el.classList].indexOf('current-row') !== -1
      })
      try {
        $table[0].setCurrentRow(haveHeightLight ? '' : row)
      } catch (e) {
        $table.setCurrentRow(haveHeightLight ? '' : row)
      }
    }

这样就可以实现切换高亮了(element树形结构的表格也同样适用) !
如果解决了您的问题，麻烦点个赞，让更多人也能解决该问题。