el-table(vue2中)滚动条被固定列盖住

一、项目场景:

vue2 + el-table


二、问题描述

1、现场图片:
2、全局css环境配置了滚动条高度为6px
css 复制代码
/* 全局滚动条配置 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  border-radius: 3px;
}
3、el-table设置滚动条为15px(比全局高9px)
css 复制代码
/* el-table滚动条配置 */
.el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {
   height: 15px; 
}

三、原因分析:

el-table固定列(是根据全局滚动条高度计算,导致覆盖掉滚动条9px,只显示6px)


四、解决方案:

改变el-table固定列的计算高度即可

css 复制代码
  .el-table {
    .el-table__fixed-right,
    .el-table__fixed {
      height:auto !important;
      bottom:15px !important;
    }
  }

五、附 自定义滚动条配置

伪类 注解

::-webkit-scrollbar 滚动条整体部分

::-webkit-scrollbar-button 滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。

::-webkit-scrollbar-track 外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。

::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)。

::-webkit-scrollbar-thumb 滚动条里面可以拖动的那部分

::-webkit-scrollbar-corner 边角

::-webkit-resizer 定义右下角拖动块的样式

css 复制代码
/* 自定义细滚动条 */
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-button{width:4px;height:10px;}
::-webkit-scrollbar-track{background:0 0;border-radius: 2px}
::-webkit-scrollbar-thumb{background:#cccccc;-webkit-transition:.3s;transition:.3s;border-radius: 4px}
::-webkit-scrollbar-thumb:hover{background-color:#56585c}
::-webkit-scrollbar-thumb:active{background-color:#56585c}

六、其他解决方案

css 复制代码
.app-main:not(.el-table__body-wrapper)::-webkit-scrollbar {width: 6px;height: 6px;}
.app-main:not(.el-table__body-wrapper)::-webkit-scrollbar-track {background-color: #f1f1f1;}
.app-main:not(.el-table__body-wrapper)::-webkit-scrollbar-thumb {background-color: #c0c0c0;border-radius: 3px}

不影响全局的滚动条,全局的滚动条依然是默认的滚动条

在根盒子上设置自定义滚动条

但排除.el-table__body-wrapper 的滚动条

这样el-table的滚动条就是默认的滚动条,也可以不排除,给el-table单独设置高度,但默认滚动条要改成一样高度和宽度的,不然会出现遮挡或有间隔情况

相关推荐
独立开阀者_FwtCoder5 分钟前
Vite Devtools 要发布了!期待
前端·面试·github
独立开阀者_FwtCoder5 分钟前
国外最流行的 UI 组件库!适配 Vue、React、Angular!
前端·vue.js·后端
CodeSheep12 分钟前
小米汽车这薪资是认真的吗?
前端·后端·程序员
白白李媛媛18 分钟前
上传Vue3+vite+Ts组件到npm官方库保姆级教程
前端·arcgis·npm
晴殇i26 分钟前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css
程序猿阿伟31 分钟前
《声音的变形记:Web Audio API的实时特效法则》
开发语言·前端·php
凌览34 分钟前
有了 25k Star 的MediaCrawler爬虫库加持,三分钟搞定某红书、某音等平台爬取!
前端·后端·python
万少36 分钟前
2-自然壁纸实战教程-AGC 新建项目
前端·harmonyos
满分观察网友z1 小时前
别小看这个滑动条!从性能灾难到用户挚爱的 uni-app Slider 踩坑实录
前端
编程猪猪侠1 小时前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro