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>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM