0
点赞
收藏
分享

微信扫一扫

springboot 开启缓存 @EnableCaching(使用redis)

WikongGuan 2024-05-14 阅读 39
记录自定义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;
}
举报

相关推荐

0 条评论