一. Element Ui默认滚动条是这样的:

如图红色框中所示,table右侧预留了滚动条的位置,修改滚动条样式之后,element ui计算这个预留宽度有点问题,导致留白:

二、修改滚动条样式代码如下:

:deep .el-table__body-wrapper::-webkit-scrollbar{
    width: 10px !important;
    height: 10px !important;
}
:deep .el-table__body-wrapper::-webkit-scrollbar-thumb{
    background: #E5E5E5 !important;
}
:deep .el-table__body-wrapper::-webkit-scrollbar-track{
    background: #CCCCCC !important;
}

提示:需要用到样式穿透:deep,否则可能不能覆盖原有样式,vue2使用/v-deep/或者::v-deep,或者取消scoped,但不推荐,因为会影响到其他页面样式

三、处理空白问题:

:deep .el-table colgroup col[name='gutter']{
    width: 11px;
}
:deep .el-table__body{
    width: 100% !important;
}

最终效果如下:

如果对你有帮助记得点赞哟!

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐