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单独设置高度,但默认滚动条要改成一样高度和宽度的,不然会出现遮挡或有间隔情况

相关推荐
Mike_jia1 天前
uuWAF:开源Web应用防火墙新标杆——从工业级防护到智能防御实战解析
前端
掘金安东尼1 天前
Chrome 17 岁了——我们的浏览器简史
前端·javascript·github
袁煦丞1 天前
群晖NAS FTP远程文件仓库全球访问:cpolar内网穿透实验室第524个成功挑战
前端·程序员·远程工作
前端小巷子1 天前
JS 打造动态表格
前端·javascript·面试
excel1 天前
从卷积到全连接:用示例理解 CNN 的分层
前端
UNbuff_01 天前
HTML 各种事件的使用说明书
前端·html
Mr. Cao code1 天前
探索OpenResty:高性能Web开发利器
linux·运维·服务器·前端·nginx·ubuntu·openresty
百思可瑞教育1 天前
ActiveMQ、RocketMQ、RabbitMQ、Kafka 的全面对比分析
vue.js·分布式·rabbitmq·rocketmq·activemq·北京百思可瑞教育·百思可瑞教育
li35741 天前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj1 天前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js