修复elementui修改了el-table组件的滚动条样式后出现的问题

问题描述：

众所周知， el-table的滚动条使用的是原生的滚动条，样式比较丑，于是本人就擅自改动了一下滚动条样式，理想中的样子是这样的

 但是实际是这样的，

 出现了显示不全，固定列离滚动条距离加宽的问题

下面是我修改滚动条用的样式

/deep/.el-table__body-wrapper { &::-webkit-scrollbar { height: 6px; width: 6px; } &::-webkit-scrollbar-track { background-color: #fff; } &::-webkit-scrollbar-thumb { background-color: #ccc; } &::-webkit-scrollbar-thumb:hover { background-color: #409eff; } }

解决问题

因为默认的固定列偏移的位置刚好是原生滚动条的宽度，所以主要是通过修改一下偏移量去解决问题

下面的样式是完整样式，也可以叫做修改elementui的表格滚动条样式

// ----------修改elementui表格的默认样式----------- .el-table__body-wrapper { &::-webkit-scrollbar { height: 6px; width: 6px; } &::-webkit-scrollbar-track { background-color: #fff; } &::-webkit-scrollbar-thumb { background-color: #ccc; } &::-webkit-scrollbar-thumb:hover { background-color: #409eff; } } // 解决表格固定列问题 .el-table__fixed, .el-table__fixed-right{ height: calc(100% - 7px) !important; box-shadow: -5px -2px 10px rgba(0,0,0,.12) !important; .el-table__fixed-body-wrapper{ height: calc(100% - 36px) !important; } } // 当表格没有滚动条时 .el-table__body-wrapper.is-scrolling-none~.el-table__fixed-right{ height: 100% !important; bottom: 0 !important; box-shadow: none !important; } // 当表格有纵向滚动条时 .el-table--scrollable-y .el-table__fixed-right{ right: 7px !important; } // 当表格只有横向滚动条，没有纵向滚动条时 .el-table--scrollable-x:not(.el-table--scrollable-y) .el-table__fixed-right{ right: 0 !important; }

效果