elementUI設定表格懸浮樣式
阿新 • • 發佈:2021-12-14
<style> /* 表格滑鼠懸浮時的樣式(高亮) */ .el-table--enable-row-hover .el-table__body tr:hover { background-color: rgba(255, 255, 255, 0); } /*表格滑鼠懸停的樣式(背景顏色)*/ .el-table tbody tr:hover > td { background-color: rgba(255, 255, 255, 0); } .el-table__body .el-table__row.hover-row td{ background-color: rgba(255, 255, 255, 0); } </style>
上面的設定會影響全部的table,我們在 table 外邊包裹一個div,並設定類名,然後通過修改樣式,來達到只在某個頁面中修改
<div class="hovertable"> <el-table> ...... </el-table> </div> <style> /* 表格滑鼠懸浮時的樣式(高亮) */ .hovertable .el-table--enable-row-hover .el-table__body tr:hover { background-color: rgba(255, 255, 255, 0); } /*表格滑鼠懸停的樣式(背景顏色)*/ .hovertable .el-table tbody tr:hover > td { background-color: rgba(255, 255, 255, 0); } /* 只要在 table 外邊包裹了 div.hovertable 則滑鼠懸浮上去不會變色 */ .hovertable .el-table__body .el-table__row.hover-row td{ background-color: rgba(255, 255, 255, 0); } </style>