前言凛澎，在大家使用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>
我們這里需要用一個自定義的函數(shù)$rowClick（這個函數(shù)名按喜好隨意），這里的自定義函數(shù)接收四個參數(shù)呻逆，row夸赫、column、event咖城、ref（當前表格的ref）茬腿。
因為@row-click本身帶了參數(shù)所以我們需要用把自定義函數(shù)包裹在匿名函數(shù)里，然后接收它帶的參數(shù)宜雀，再加入新參數(shù)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)
}
}
這樣就可以實現(xiàn)切換高亮了(element樹形結(jié)構(gòu)的表格也同樣適用) !
如果解決了您的問題，麻煩點個贊辐董，讓更多人也能解決該問題悴品。
