el-table组件滚动条美化

最新推荐文章于 2025-06-11 11:28:02 发布

aicloudgo

最新推荐文章于 2025-06-11 11:28:02 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/evelen/article/details/115008559

本文介绍了如何使用CSS对Element UI的el-table组件进行滚动条的美化，展示了一种实现表格滚动条优雅外观的方法。

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

el-table组件

<el-table :data="tableData" style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
</el-table>

el-table美化滚动条样式

<style>
  .el-table__body-wrapper::-webkit-scrollbar {
    /*纵向滚动条*/
    width: 10px;
    /*横向滚动条*/
    height: 10px;
  }

  .el-table__body-wrapper::-webkit-scrollbar-thumb {
    /*滚动条滑块颜色*/
    background-color: #333;
    border-radius: 5px;
  }

  .el-table__body-wrapper::-webkit-scrollbar-track {
    /*滚动条背景色*/
    background-color: #111;
  }

  .el-table__body-wrapper::-webkit-scrollbar-corner {
    /*表格滚动条角落*/
    background-color: #111;
  }
</style>

效果