element-plus el-table 修改表格样色

element-plus el-table 修改表格样色

码农世界 2024-05-18 后端 108 次浏览 0个评论
记录自定义el-table表格样式

持续更新中

1、修改el-table 滚动条
/** 横向 */
.el-scrollbar__bar.is-horizontal {
    height: 10px;
}
/** 纵向 */
.el-scrollbar__bar.is-vertical {
    width: 10px;
}
.el-scrollbar__bar.is-horizontal .el-scrollbar__thumb {
    opacity: 1;
    height: 14px;
    border-radius: 2px;
    background-color: rgb(115, 142, 157);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
}
.el-scrollbar__bar.is-vertical .el-scrollbar__thumb {
    opacity: 1;
    width: 14px;
    border-radius: 2px;
    background-color: rgb(115, 142, 157);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
}
2、修改 highlight-current-row 高亮背景色
.el-table__body tr.current-row>td.el-table__cell {
    background-color: /** 自定义颜色 */ !important;
    color: /** 自定义颜色 */;
}
// 各种行属性下hover背景色 如固定列
.el-table--enable-row-hover .el-table__body tr:hover>td{
  background-color: @el-table-tr-hover !important;
}
// 各种行属性下hover背景色 如固定列
.el-table__body tr.hover-row>td.el-table__cell{
  background-color: @el-table-tr-hover !important;
}
3、固定列处,X轴滚动条无法拖动
.el-table--scrollable-x .el-table__body-wrapper {
  z-index: 1;
}

转载请注明来自码农世界,本文标题:《element-plus el-table 修改表格样色》

百度分享代码,如果开启HTTPS请参考李洋个人博客
每一天,每一秒,你所做的决定都会改变你的人生!

发表评论

快捷回复:

评论列表 (暂无评论,108人围观)参与讨论

还没有评论,来说两句吧...

Top