滚动条调整
/* 设置滚动条的样式 */
.el-table__body-wrapper::-webkit-scrollbar {
width: 8px;
height: 8px;
}
/* 滚动条滑块 */
.el-table__body-wrapper::-webkit-scrollbar-thumb {
border-radius: 4px;
background: rgba(0,0,0,.1);
cursor: pointer;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb:window-inactive {
background: rgba(0,0,0,.1);
}
效果(注意右侧和下方都有空隙出现)
![](https://img.haomeiwen.com/i21836592/9bd6464ab36d9abb.png)
企业微信截图_2eb32365-ee56-4689-9461-c35287567a32.png
解决(加上这句css)
.el-table__fixed,.el-table__fixed-right {
height: calc(100% - 8px) !important; // ( 100% - 横向滚动条高度 )
right: 8px !important;
}
解决了但还是有遗留问题
![](https://img.haomeiwen.com/i21836592/6be90c37efd19b0e.png)
image.png
遗留问题(当我没滚动条的时候 仍然存在right:8px; 右侧会以留有8px空白)
![](https://img.haomeiwen.com/i21836592/22da0bd7984462d9.png)
image.png
完美解决方案
/* 设置滚动条的样式 */
.el-table__body-wrapper::-webkit-scrollbar {
width: 8px;
height: 8px;
}
/* 滚动条滑块 */
.el-table__body-wrapper::-webkit-scrollbar-thumb {
border-radius: 4px;
background: rgba(0,0,0,.1);
cursor: pointer;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb:window-inactive {
background: rgba(0,0,0,.1);
}
// 处理有x滚动条时高度遮挡滚动条
.el-table--scrollable-x {
.el-table__fixed,.el-table__fixed-right {
height: calc(100% - 8px) !important;
}
}
// 存在滚动条的时候在right
.el-table--scrollable-y {
.el-table__fixed-right {
right: 8px !important;
}
}
// 解决修改滚动条底部不对齐问题
.el-scrollbar__wrap::-webkit-scrollbar {
width: 8px;
height: 8px;
}
网友评论