Element UI中的table组件添加横向滚动条

198 阅读 0 评论 131 点赞

我是靠谱客的博主温婉宝贝，这篇文章主要介绍Element UI中的table组件添加横向滚动条，现在分享给大家，希望可以做个参考。

如何给Element UI中的table组件添加横向滚动条

并非是浏览器自带滚动条样式，而是类似于Element滚动条样式

话不多说直接上代码

 .el-table__body-wrapper::-webkit-scrollbar {
    width: 8px; /*滚动条宽度*/
    height: 8px; /*滚动条高度*/
  }
 .el-table__body-wrapper::-webkit-scrollbar-track {
    border-radius: 10px; /*滚动条的背景区域的圆角*/
    -webkit-box-shadow: inset 0 0 6px rgba(238,238,238, 0.3);
    background-color: #eeeeee; /*滚动条的背景颜色*/
  }
  .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 10px; /*滚动条的圆角*/
    -webkit-box-shadow: inset 0 0 6px rgba(145, 143, 0143, 0.3);
    background-color: rgb(145, 143, 143); /*滚动条的背景颜色*/
  }

样式根据自己需要的调整就可以，如果想全局使用的话直接在App.vue中引用即可

在这里插入图片描述