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

记录自定义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;
}