记录自定义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; }
还没有评论,来说两句吧...