Element Ui 表格自定义滚动条，以及自定义滚动条后出现空白问题

一. 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;
}

最终效果如下：

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