1. 程式人生 > 其它 >elementUI設定表格懸浮樣式

elementUI設定表格懸浮樣式

<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>