element ui 表格滚动条样式重设方法

84 阅读 0 评论 56 点赞

我是靠谱客的博主痴情纸飞机，这篇文章主要介绍element ui 表格滚动条样式重设方法，现在分享给大家，希望可以做个参考。

很多场景下我们会重设滚动条的样式，下边把具体实现代码贴出来：

// 兼容火狐
  ::v-deep .el-table__body-wrapper {
    overflow-y: scroll;
    scrollbar-color: #bebebf transparent;
    scrollbar-width: thin;
  }
  // 兼容谷歌
  // 滚动条的宽度
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px; // 横向滚动条
    height: 6px; // 纵向滚动条 必写
  }
  // 滚动条的滑块
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #bebebf;
    border-radius: 3px;
  }
  :deep .el-table__body-wrapper::-webkit-scrollbar-track{
    background: #CCCCCC !important;
  }