1.ElementUI样式优化 --- el-table去除右侧白条并修改滚动条样式
标签搜索

1.ElementUI样式优化 --- el-table去除右侧白条并修改滚动条样式

ashgod
2024-07-24 / 0 评论 / 194 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2024年07月24日,已超过252天没有更新,若内容或图片失效,请留言反馈。

1.去除右侧白条

// 去掉el-table表头右侧空白区域
/deep/ .el-table__header{
    width: 100% !important;
}
/deep/ .el-table__body{
    width: 100% !important;
}
/deep/ .el-table th.gutter{
    display: none !important;
    width:0 !important;
}
/deep/ .el-table colgroup col[name='gutter']{
    display: none !important;
    width: 0 !important;
}

修改滚动条样式

// 滚动条的宽度
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px; // 横向滚动条
    height: 6px; // 纵向滚动条 必写
}
// 滚动条的滑块
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: rgb(2, 64, 156);
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
    background: rgb(8, 35, 96);;
}
0

评论

博主关闭了所有页面的评论