前言

在使用element-ui的el-table表格的過程中，會發(fā)現(xiàn)，雖然框架的表格很好用很方便，emmmm，確實很好用，但是有一些煩人的甲方卻不想要，table的浮現(xiàn)效果，特別是，單獨給單元格設(shè)置了背景顏色之后，這個hover狀態(tài)會覆蓋掉自定義的單元格的背景顏色，是不是很煩人，是不是很抓狂，我也是從網(wǎng)上搜羅了一大串的解決方法，這邊就一一做一下總結(jié)。

方法一 ------覆蓋css樣式

使用css覆蓋的方法，修改掉他默認的hover狀態(tài)的顏色。例如：

.el-table tbody tr:hover>td {
            background-color:#f5f5f5 !important //修改成自己想要的顏色即可
        }

或者

.el-table__body tr.hover-row.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped.current-row>td.el-table__cell,  .el-table__body tr.hover-row.el-table__row--striped>td.el-table__cell, .el-table__body tr.hover-row>td.el-table__cell{
  background-color: #f5f5f5  !important;
  }

但是這個方法顯而易見，只支持修改一種顏色，像如下這種情況就不能使用

由于列有背景顏色的緣故，修改css樣式的話，顯然當鼠標hover上去的時候，有顏色的單元格還是會被覆蓋掉原來的顏色！
所以這種方法只適用于背景顏色統(tǒng)一的表格！

方法二------卸載掉背景顏色（類似于方法一）

代碼如下（示例）：

.el-table tbody tr:hover>td {
            background-color:#f5f5f5 !important //修改成自己想要的顏色即可
        }

或者

.el-table__body tr.hover-row.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped.current-row>td.el-table__cell,  .el-table__body tr.hover-row.el-table__row--striped>td.el-table__cell, .el-table__body tr.hover-row>td.el-table__cell{
  background-color: #f5f5f5  !important;
  }

方法三------使用函數(shù)方法

在el-tavle中加入如下屬性，強制讓單元格渲染成固定顏色，這個方法也可取，但是遇到需要變色的單元格，顯然就使用不了，問題顯然又回到了方法一的缺陷之中去了。

但在單一背景色的表格中可?。。?！

:cell-style="{background: 'revert'}"

方法四------禁用鼠標懸浮

將所有事件禁用，雖然不會觸發(fā)el-table的hover效果，也支持不同顏色的單元格，BUT!!

?。?！這種方法將導致表格的點擊事件無法使用，例如表格最后一列的一些彈窗、或者一些刪除、修改或者添加等操作將無法使用！??！

.el-table tbody tr {
    pointer-events: none;
  }

這種方法最為雞肋，最不推薦?。?！

怎么辦？

就以為到這了嗎？？？

其實這些方法都是大多數(shù)網(wǎng)友總結(jié)的，但是都滿足不了我的業(yè)務需求。

要么自己重寫一個table表格，復刻一個el-table？？？

只能說??！

懶人一個不想去碼這么代碼，況且element-ui已經(jīng)封裝的非常完美了，并且大多數(shù)的需求也已經(jīng)滿足了，所以這種想法不現(xiàn)實??！

跟甲方說做不了？好像也不現(xiàn)實，畢竟是開發(fā)人員。。。。

偶然間看到瀏覽器控制臺的樣式警告，陷入了深思，好像這種方法可行??！

將錯就錯！?。。。?！

究極解決------將錯就錯

我們在控制臺查看我們屬性寫錯，或者參數(shù)寫錯的時候都會出現(xiàn)如下的警告并且這種警告的顏色在網(wǎng)頁里面是不生效的，根據(jù)這個思路，我們無非就是不想要他的hover顏色展現(xiàn)出來

看到這里我一下豁然開朗??！

咱要不寫個錯的樣式，覆蓋掉原有的hover樣式試了一下果真就成了好吧！！

這個是自我琢磨出來的，看起來挺傻的，但是目前也能用，廢話不說附上代碼??！

 .noneHoveTable .el-table__body tr.hover-row.current-row>td.el-table__cell, .noneHoveTable  .el-table__body tr.hover-row.el-table__row--striped.current-row>td.el-table__cell,  .noneHoveTable .el-table__body tr.hover-row.el-table__row--striped>td.el-table__cell, .noneHoveTable  .el-table__body tr.hover-row>td.el-table__cell{
  background-color: a  !important;
  }

這里我自定義了類名noneHoveTable只要不需要hover狀態(tài)的表格，加入這個類名即可，效果如下

這樣設(shè)置之后就不在會用hover狀態(tài)的出現(xiàn)?。?！

總結(jié)

到此這篇關(guān)于element-ui如何取消el-table的hover狀態(tài)的文章就介紹到這了,更多相關(guān)element-ui取消el-table高亮顯示內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論