el-table 固定列后固定列盖住滚动条怎么解决？产品想要鼠标悬浮改变滚动条颜色怎么实现？

momo（激进版）

已于 2024-06-28 13:12:25 修改

阅读量433

点赞数 6

分类专栏：前端笔记文章标签： elementui

于 2024-01-24 11:43:40 首次发布

本文链接：https://blog.csdn.net/m0_56885551/article/details/135818058

版权

前端笔记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

文章讨论了在使用VueElementUI的表格组件时，如何调整滚动条的高度以避免被固定列遮挡。作者提供了CSS样式调整的方法，包括设置`height`,`bottom`以及滚动滑块的样式变化。

摘要由CSDN通过智能技术生成

固定列盖住滚动条

产品嫌滚动条太细调整高度后滚动条被固定列盖住了

.el-table {
  .el-table__fixed-right,
  .el-table__fixed {
    height: auto !important;
    bottom: 8px !important;  // 这个得根据滚动条的高度进行调整
  }
}

鼠标悬浮在滚动

正常

鼠标悬浮后

/* 滚动条的滑块 */
.el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(214, 230, 255, 0.6);
  -webkit-transition: 0.5s;
  transition: 0.5s;
  border-radius: 4px;
}
.el-table__body-wrapper::-webkit-scrollbar-track {
  background: 0 0;
  border-radius: 2px;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb:hover,
.el-table__body-wrapper::-webkit-scrollbar-thumb:active {
  background-color: rgba(9, 45, 104, 0.6);
  width: 10px;
  height: 10px;
}