element-ui如何取消el-table的hover狀態(tài)(取消高亮顯示)
前言
在使用element-ui的el-table表格的過(guò)程中，會(huì)發(fā)現(xiàn)，雖然框架的表格很好用很方便，emmmm，確實(shí)很好用，但是有一些煩人的甲方卻不想要，table的浮現(xiàn)效果，特別是，單獨(dú)給單元格設(shè)置了背景顏色之后，這個(gè)hover狀態(tài)會(huì)覆蓋掉自定義的單元格的背景顏色，是不是很煩人，是不是很抓狂，我也是從網(wǎng)上搜羅了一大串的解決方法，這邊就一一做一下總結(jié)。
方法一 ------覆蓋css樣式
使用css覆蓋的方法，修改掉他默認(rèn)的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;
}
但是這個(gè)方法顯而易見(jiàn)，只支持修改一種顏色，像如下這種情況就不能使用
由于列有背景顏色的緣故，修改css樣式的話，顯然當(dāng)鼠標(biāo)hover上去的時(shí)候，有顏色的單元格還是會(huì)被覆蓋掉原來(lái)的顏色！
所以這種方法只適用于背景顏色統(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中加入如下屬性，強(qiáng)制讓單元格渲染成固定顏色，這個(gè)方法也可取，但是遇到需要變色的單元格，顯然就使用不了，問(wèn)題顯然又回到了方法一的缺陷之中去了。
但在單一背景色的表格中可?。。?！
:cell-style="{background: 'revert'}"
方法四------禁用鼠標(biāo)懸浮
將所有事件禁用，雖然不會(huì)觸發(fā)el-table的hover效果，也支持不同顏色的單元格，BUT!!
?。?！這種方法將導(dǎo)致表格的點(diǎn)擊事件無(wú)法使用，例如表格最后一列的一些彈窗、或者一些刪除、修改或者添加等操作將無(wú)法使用?。?！
.el-table tbody tr {
pointer-events: none;
}這種方法最為雞肋，最不推薦?。?！
怎么辦？
就以為到這了嗎？？？
其實(shí)這些方法都是大多數(shù)網(wǎng)友總結(jié)的，但是都滿足不了我的業(yè)務(wù)需求。
要么自己重寫一個(gè)table表格，復(fù)刻一個(gè)el-table？？？
只能說(shuō)??！
懶人一個(gè)不想去碼這么代碼，況且element-ui已經(jīng)封裝的非常完美了，并且大多數(shù)的需求也已經(jīng)滿足了，所以這種想法不現(xiàn)實(shí)?。?/strong>
跟甲方說(shuō)做不了？好像也不現(xiàn)實(shí)，畢竟是開(kāi)發(fā)人員。。。。
偶然間看到瀏覽器控制臺(tái)的樣式警告，陷入了深思，好像這種方法可行?。?/strong>
將錯(cuò)就錯(cuò)?。。。。。?/strong>
究極解決------將錯(cuò)就錯(cuò)
我們?cè)诳刂婆_(tái)查看我們屬性寫錯(cuò)，或者參數(shù)寫錯(cuò)的時(shí)候都會(huì)出現(xiàn)如下的警告并且這種警告的顏色在網(wǎng)頁(yè)里面是不生效的，根據(jù)這個(gè)思路，我們無(wú)非就是不想要他的hover顏色展現(xiàn)出來(lái)
看到這里我一下豁然開(kāi)朗！！
咱要不寫個(gè)錯(cuò)的樣式，覆蓋掉原有的hover樣式試了一下果真就成了好吧！！
這個(gè)是自我琢磨出來(lái)的，看起來(lái)挺傻的，但是目前也能用，廢話不說(shuō)附上代碼?。?/p>
.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)的表格，加入這個(gè)類名即可，效果如下
這樣設(shè)置之后就不在會(huì)用hover狀態(tài)的出現(xiàn)?。?！
總結(jié)
到此這篇關(guān)于element-ui如何取消el-table的hover狀態(tài)的文章就介紹到這了,更多相關(guān)element-ui取消el-table高亮顯示內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- Element-UI中el-table如何合并相同單元格
- element-ui中el-table不顯示數(shù)據(jù)的問(wèn)題解決
- Element-ui設(shè)置el-table表頭全選框隱藏或禁用
- vue element-ui實(shí)現(xiàn)el-table表格多選以及回顯方式
- vue element-ui el-table組件自定義合計(jì)(summary-method)的坑
- element-ui中如何給el-table的某一行或某一列加樣式
- 圖文詳解Element-UI中自定義修改el-table樣式
- element-UI?el-table樹(shù)形數(shù)據(jù)?修改小三角圖標(biāo)方式
- Element-UI 解決el-table中圖片懸浮被遮擋問(wèn)題小結(jié)
相關(guān)文章
在項(xiàng)目中使用自定義字體可以提升頁(yè)面的視覺(jué)效果,并確保在不同設(shè)備上的一致性,文中通過(guò)代碼示例給出了具體的操作步驟,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-06-06
vue+element實(shí)現(xiàn)輸入密碼鎖屏
這篇文章主要為大家詳細(xì)介紹了vue+element實(shí)現(xiàn)輸入密碼鎖屏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue導(dǎo)出excel的兩種實(shí)現(xiàn)方式代碼
這篇文章主要給大家介紹了關(guān)于vue導(dǎo)出excel的兩種實(shí)現(xiàn)方式,在項(xiàng)目中我們可能會(huì)碰到導(dǎo)出Excel文件的需求,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2023-08-08
基于Element封裝一個(gè)表格組件tableList的使用方法
這篇文章主要介紹了基于Element封裝一個(gè)表格組件tableList的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
el-tree使用獲取當(dāng)前選中節(jié)點(diǎn)的父節(jié)點(diǎn)數(shù)據(jù)
本文主要介紹了el-tree使用獲取當(dāng)前選中節(jié)點(diǎn)的父節(jié)點(diǎn)數(shù)據(jù),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-10-10
關(guān)于Vue-cli3煩人的eslint問(wèn)題
這篇文章主要介紹了關(guān)于Vue-cli3煩人的eslint問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue中如何使用vue-baberrage生成彈幕，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
vue中v-bind和v-model的區(qū)別及說(shuō)明
這篇文章主要介紹了vue中v-bind和v-model的區(qū)別及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue使用Axios進(jìn)行跨域請(qǐng)求的方法詳解
在開(kāi)發(fā)現(xiàn)代?Web?應(yīng)用時(shí),前端和后端通常分離部署在不同的服務(wù)器上,這就會(huì)引發(fā)跨域請(qǐng)求問(wèn)題,所以本文將詳細(xì)介紹如何在?Vue?項(xiàng)目中使用?Axios?發(fā)起跨域請(qǐng)求時(shí)解決跨域問(wèn)題的相關(guān)資料,需要的朋友可以參考下2024-09-09
Vue監(jiān)聽(tīng)事件實(shí)現(xiàn)計(jì)數(shù)點(diǎn)擊依次增加的方法
今天小編就為大家分享一篇Vue監(jiān)聽(tīng)事件實(shí)現(xiàn)計(jì)數(shù)點(diǎn)擊依次增加的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09