ElementUI中表格el-table滚动条样式的优化

最新推荐文章于 2026-05-08 05:27:58 发布

原创最新推荐文章于 2026-05-08 05:27:58 发布 · 2.5w 阅读

13 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

ElementUI官方文档里table表格的滚动条样式欠佳，博客介绍使用其最基础表格进行简单封装，并修改样式，还展示了封装后的效果图。

ElementUI官方文档提供的table表格的滚动条样式不美观，简单封装之后的效果图

这里使用的是elementui中最基表格

修改样式

.slot::-webkit-scrollbar{
    width: 2px;
}
.slot::-webkit-scrollbar-thumb{
    border-radius: 2px;
    height: 50px;
    background: #eee;
}
.slot::-webkit-scrollbar-track{
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    background: rgba(0,0,0,0.4);
}