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

一、项目场景:

  vue2 + el-table


二、问题描述

        1、现场图片:

                

        2、全局css环境配置了滚动条高度为6px
/* 全局滚动条配置 */
::-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)
/* el-table滚动条配置 */
.el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {height: 15px; 
}


三、原因分析:

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


四、解决方案:

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

  .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                         定义右下角拖动块的样式

/* 自定义细滚动条 */
::-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}

六、其他解决方案

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/123058.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java 工具类 列表动态维护

原本需求:一个二级 list 更新功能。 常规实现:先删除原来的全部数据,再重新插入,这样就很耗时了,所以这里写一个工具类出来。 1. 如果有新增的数据:仅对这些数据新增 2. 如果有删除的数据:仅…

STM32F4VGT6-DISCOVERY:uart1驱动

对于这款板子&#xff0c;官方并没有提供串口例程&#xff0c;只能自行添加。 一、PA9/PA10复用成串口1功能不可用 驱动测试代码如下&#xff1a; main.c: #include "main.h" #include <stdio.h>void usart1_init(void) {GPIO_InitTypeDef GPIO_InitStruct…

Cesium 展示——对每段线、点、label做分组实体管理

文章目录 需求分析需求 对多组实体的管理,每组实体中包含多个点和一条线,并可对该组进行删除操作 分析 删除操作中用到了 viewer.entities.remove(radarEntity); 根据ID获取实体var radar = viewer.entities.getById(radar); viewer.entities.remove(radar );

ubuntu 18 更新git版本到 2.80.1

前言 使用gitlab的时候&#xff0c;发现下面这条语句不能用 git init --initial-branch XXX查看git version git version下载 wget https://mirrors.edge.kernel.org/pub/software/scm/git/git-2.38.1.tar.gz 或者 https://git-scm.com/download/linux 或者去github上面下载…

汇编语言-div指令溢出问题

汇编语言-div指令溢出问题 8086CPU中被除数保存在ax(16位)或ax和dx&#xff08;32位&#xff09;中&#xff0c;如果被除数为16位&#xff0c;进行除法运算时al保存商&#xff0c;ah保存余数。如果被除数为32位时&#xff0c;进行除法运算时&#xff0c;ax保存商&#xff0c;d…

从最简单基本开始 or 把问题复杂化还自诩为“设计了一个可扩展的系统”?

文章目录 Intro程序员“把问题复杂化”的职业病如何抉择 Intro 刚才看了一段关于在苹果系统中使用numbers表格软件制作记账本的视频教程&#xff1a;当 Excel 交给苹果来设计会变成…&#xff1f;#Numbers 新手教学&#xff0c;以下为最终界面效果&#xff1a; 有些触动&…

Python Flask

Python Flask是一个轻量级的web开发框架&#xff0c;用于快速地构建web应用程序。以下是Python Flask的基本使用步骤&#xff1a; 安装Flask&#xff1a;使用pip安装Flask包。在命令行中输入以下命令&#xff1a; pip install flask创建Flask对象&#xff1a;在Python文件中&am…

Spring中简单的获取Bean对象(对象装配)

获取Bean对象也叫做对象装配&#xff0c;是把对象取出来放到某个类中&#xff0c;有时候也叫对象注入&#xff01; 对象装配&#xff08;对象注入&#xff09;更加简单的读取Bean&#xff08;是从Spring容器中读取某个对象放到当前类里面&#xff09;的实现方法有以下3种&…

【iOS】——知乎日报第二周总结

文章目录 一、自定义cell内容乱序问题二、WKWebView加载网页三、通过cell的协议函数进入指定网页四、滚动视图左滑加载新的网页五、隐藏导航栏 一、自定义cell内容乱序问题 当我下拉刷新的时候一开始我自定义的cell的内容顺序没有问题&#xff0c;当我一直下拉刷新或者上滑看以…

mac电脑视频处理推荐:达芬奇DaVinci Resolve Studio 18 中文最新

DaVinci Resolve Studio 18是一款专业的视频编辑、调色和后期制作软件&#xff0c;由Blackmagic Design开发。它被广泛应用于电影、电视和广告等行业&#xff0c;提供了全面的工具和功能&#xff0c;使用户能够进行高质量的影片制作和后期处理。 以下是DaVinci Resolve Studio…

【QML】vscode安装QML格式化插件方法

1. 安装插件 拓展 > 搜索qml > 找到QML Format >点击安装 2. 配置 打开settings.json文件 ctl shift p&#xff0c;然后搜索settings 修改settings.js内容 {...//添加以下内容// 根据自己电脑安装路径来填写qmlformat.exe的路径&#xff0c;注意转义符"\…

数字孪生与智慧城市:开启未来智慧生活

在数字时代的浪潮中&#xff0c;数字孪生技术和智慧城市的理念相互交织&#xff0c;共同塑造了一个更智能、更可持续、更宜居的未来。数字孪生是一项前沿技术&#xff0c;将虚拟世界与现实世界相融合&#xff0c;为城市管理者和市民带来了前所未有的机遇和便捷。 数字孪生模型是…

redis集群中节点fail,noaddr

文章目录 1. 问题&#xff1a;fail,noaddr2. cluster nodes节点信息解读2.1 每个字段的含义2.2 flags字段各标记含义 3. redis集群fail,noaddr问题解决4. cluster指令5. 相关文章(1) redis集群搭建(2) 华为云两台机器内网互联(3) /etc/rc.d/init.d 详解|程序开机自启(4) Redis5…

使用信号管理Nginx的父子进程

Nginx是一个多进程程序&#xff0c;进程之间进行通讯可以使用共享内存和信号等。做进程管理时&#xff0c;只能使用信号。 能够接受命令的有三者&#xff1a; Master进程 Work进程 nginx命令行 Master进程 可以监控Worker进程发来的CHLD信号。 管理worker进程可以接受的命令&a…

树——对称二叉树

leetcode题目地址 树为空树&#xff0c;亦为对称二叉树树非空时&#xff0c;仅需判断其左右子树是否对称判断左右子树对称 (1) 左右子树是否为空&#xff0c;有一个为空 便不对称&#xff0c; 都为空或都不为空 可能对称 (2) 左右子树根节点值是否相同 (3) 判断 左子树 的 左子…

【数据结构练习题】删除有序数组中的重复项

✨博客主页&#xff1a;小钱编程成长记 &#x1f388;博客专栏&#xff1a;数据结构练习题 &#x1f388;相关博文&#xff1a;消失的数字 — 三种解法超详解 删除有序数组中的重复项 1.&#x1f388;题目2. &#x1f388;解题思路3. &#x1f388;具体代码&#x1f387;总结 1…

【机器学习】决策树与分类案例分析

决策树与分类案例分析 文章目录 决策树与分类案例分析1. 认识决策树2. 分类3. 决策树的划分依据4. 决策树API5. 案例&#xff1a;鸢尾花分类6. 决策树可视化7. 总结 1. 认识决策树 决策树思想的来源非常朴素&#xff0c;程序设计中的条件分支结构就是if-else结构&#xff0c;最…

Python求n位的自幂数

一个n位自然数等于自身各个数位上数字的n次幂之和&#xff0c;则称此数为自幂数。 方法1 n int(input(请输入位数:)) for num in range(10**(n-1), 10**n):if sum(map(lambda i: int(i)**n, str(num))) num:print(num)方法2 n int(input(请输入位数:)) result filter(la…

手写IOC

本篇博客我们来手写一个IOC&#xff0c;就是模拟出IOC里边的实现过程。这过程怎么做呢&#xff1f; 咱们主要基于java中的反射&#xff0c;再加注解&#xff0c;来实现spring框架中IOC的这个效果。 下面我们来具体看看这个过程。首先因为这里边要用到反射&#xff0c;咱们把反…

实在没货,简历(软件测试)咋写?

简历咋写&#xff0c;这是很多没有【软件测试实际工作经验】的同学们非常头疼的事情。 简历咋写&#xff1f;首先你要知道简历的作用。 简历的作用是啥呢&#xff1f;一句话就是&#xff1a;让HR小姐姐约你。 如何让HR看你一眼&#xff0c;便相中你的简历&#xff0c;实现在众…