设置el-table滚动条样式以及在鼠标移入时才显示

最新推荐文章于 2025-06-30 14:42:53 发布

Zzs_Scofield

最新推荐文章于 2025-06-30 14:42:53 发布

阅读量1.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：笔记

本文链接：https://blog.csdn.net/zhazhashuai1999/article/details/119752901

笔记专栏收录该内容

18 篇文章

订阅专栏

本文详细讲解了如何使用CSS调整Eleme UI (El-table) 的滚动条样式，包括隐藏默认滚动条、hover状态下的显示以及滚动条滑块的颜色和圆角设置。适合前端开发者了解并优化组件外观。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码如下

  // 滚动条的宽度
  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 0px; // 横向滚动条
    height: 6px; // 纵向滚动条 必写
  }

  //注意:hover
  /deep/ .el-table__body-wrapper:hover::-webkit-scrollbar {
    width: 6px; // 横向滚动条
    height: 6px; // 纵向滚动条 必写
  }


  // 滚动条的滑块
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 3px;
  }