關於element-ui 中 table 鼠標懸停時高亮背景顏色的修改,添加fixed後顏色又出現問題

table 鼠標懸停時高亮背景顏色的修改

.el-table tbody tr:hover>td { background-color: #顏色 } 或 .el-table__body-wrapper tbody tr:hover>td{ background-color: #顏色 } 就可以了

如果添加了fixed 上面設置的鼠標懸浮顏色可能一部分無效了

原因是:
我們先看一下elements的設置前後結構變化對比;主要看 el-table__body-wrapper
設置前
在這裏插入圖片描述
設置後 (我設置的fixed='left'fixed="right"
在這裏插入圖片描述
可以看出多出了 綠色框中的內容,再去看看綠色框中的內容就是固定的列;
所以原因很明顯了,我們之前只是設置了.el-table__body-wrapper 的浮動顏色

解決方法:繼續添加css

.el-table__fixed tbody tr:hover>td {    //左邊固定
        background-color: #顏色;
}
.el-table__fixed-right tbody tr:hover>td {   //右邊固定
        background-color: #顏色;
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章