2023年6月20日发(作者：)

修复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__-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;}效果

2023年6月20日发(作者：)

修复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__-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;}效果