当前位置:   article > 正文

改变el-table/el-scrollbar滚动轴的颜色及(横纵向)宽度_el-scrollbar改变滚动条颜色

el-scrollbar改变滚动条颜色

在表格中如果全局样式引入的话:
.el-table {
    .el-scrollbar__thumb {
        background: #09a6ff !important;
    }

    .el-scrollbar__bar.is-horizontal {
        height: 12px !important;
    }

    .el-scrollbar__bar.is-vertical {
        width: 12px !important;
    }
}

如果单个页面样式的话:
(vue2)
::v-deep .el-table {
    .el-scrollbar__thumb {
        background: #09a6ff !important;
    }

    .el-scrollbar__bar.is-horizontal {
        height: 12px !important;
    }

    .el-scrollbar__bar.is-vertical {
        width: 12px !important;
    }
}
(vue3)
:deep(.el-table) {
    .el-scrollbar__thumb {
        background: #09a6ff !important;
    }

    .el-scrollbar__bar.is-horizontal {
        height: 12px !important;
    }

    .el-scrollbar__bar.is-vertical {
        width: 12px !important;
    }
}

单独使用el-scrollbar改变样式的话,直接去掉外层的el-table即可:
:deep(.el-scrollbar__bar.is-horizontal) {
  height: 12px;
}

:deep(.el-scrollbar__bar.is-vertical) {
  width: 12px;
}

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Guff_9hys/article/detail/850908
推荐阅读
相关标签
  

闽ICP备14008679号