【elementui】记录el-table设置左、右列固定时,加大滚动条宽度至使滚动条部分被固定列遮挡的解决方法

news2024/9/23 23:57:29

当前elementui版本:2.8.2

  • 现象:此处el-table__body-wrapper默认的滚动条宽度为8px,我加大到10px,如果不设置fixed一切正常,设置fixed后会被遮挡一点
    在这里插入图片描述

  • el-table__fixed-right::before, .el-table__fixed::before
    在这里插入图片描述

  • 设置css解决遮挡

// 左固定列
.el-table__fixed {
	height: calc(100% - 10px) !important;
}

// 右固定列
.el-table__fixed-right {
	height: calc(100% - 10px) !important;
	right: 10px !important;
}

// 设置右固定列才会出现该元素,不然不用写
.el-table__fixed-right-patch {
	width: 10px !important;
}

// 设置这一句是因为,当滚动条向下滑动时,固定列的行会和其他列的行错位,设置完这个就不错位了
.el-table__fixed-body-wrapper .el-table__body {
	padding-bottom: 10px;
	box-sizing: border-box;
}

// 设置这句是因为上第二张图,在某些场景下那条线会很突兀,就设置颜色透明让视觉上看不见   
.el-table__fixed-right::before, .el-table__fixed::before {
	background: transparent !important;
}

// 滚动条样式
.el-table__body-wrapper::-webkit-scrollbar {
	width: 10px; 
	height: 10px; 
	background: transparent;
	border-radius: 4px;
}

.el-table__body-wrapper::-webkit-scrollbar-thumb {
	// background-color: rgba(94, 171, 246, .79);
	border-radius: 12px;
}
  • 如果能够确保表格在任何屏幕下都会出现横向滚动和竖向滚动,那么上述设置已经够了。

  • 但我有一张表可以筛选列,就导致当列选的比较少时不会出现横向滚动,如果最后一行数据恰巧换行,有部分文字正好会被固定列的height: calc(100% - 10px) !important遮挡住,如下图所示,所以就要兼容两种情况

在这里插入图片描述

  • 由于我发现,出现横向滚动条时,el-table__body-wrapper会出现类名is-scrolling-right或is-scrolling-left或is-scrolling-middle,无横向滚动时,el-table__body-wrapper的类名叫做is-scrolling-none,就可以利用这一点再设置无横向滚动时的css
    在这里插入图片描述

在这里插入图片描述

// ~:用于选择某个元素之后的兄弟元素
// el-table__fixed是左固定列,要设置右固定列就是写:
// .el-table__body-wrapper.is-scrolling-none ~ .el-table__fixed-right {}
.el-table__body-wrapper.is-scrolling-none ~ .el-table__fixed {
	height: 100% !important; 
	
	.el-table__fixed-body-wrapper {
		right: 2px !important;
	}
}

最后:反正具体css设置还要看自己项目的当前情况,但是方法是这么个方法,可以通过这些类名去设置以达到目的

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

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

相关文章

【BUG】已解决:SyntaxError:positional argument follows keyword argument

SyntaxError:positional argument follows keyword argument 目录 SyntaxError:positional argument follows keyword argument 【常见模块错误】 【解决方案】 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页,我是博主英杰&#xff0c…

前端性能优化:浏览器的2种缓存方式要弄清

在前端性能优化中,最重要的就是缓存,使用缓存可以极大的提升浏览器的响应速率。 什么是缓存呢? 当我们第一次访问某个网站时,浏览器会把网站中的图片等资源存储在电脑中,以备后续使用,第二次访问该网站时…

构建智能运维系统:创新架构与效率优化

随着信息技术的迅猛发展,企业对于运维效率和服务质量的要求越来越高。智能运维系统的设计和实施,不仅能够提升系统可靠性和响应速度,还能有效降低成本和人力投入。本文将深入探讨智能运维系统的架构设计原则和关键技术,为企业在运…

观成科技:活跃窃密木马TriStealer加密通信分析

1.概述 观成安全研究团队近期在现网监测到多起TriStealer窃密木马攻击事件,TriStealer窃密木马从2024年4月开始活跃,通过Bunny CDN进行载荷下发。TriStealer会收集系统信息、屏幕截图、浏览器中存储的账号密码以及设备中所有的“txt”后缀文件、桌面文件…

华清数据结构day7 24-7-24

1> 二叉树的创建、遍历自己实现一遍 bitree.h #ifndef BITREE_H #define BITREE_H #include<myhead.h> typedef char datatype;typedef struct Node {datatype data;struct Node *L;struct Node *R; }Node,*Bitree; //创建 Bitree tree_create(); //先序遍历 void p…

el-table合计行更新问题

说明&#xff1a;在使用el-table自带的底部合计功能时&#xff0c;初始界面不会显示合计内容 解决方案&#xff1a;使用 doLayout()方法 updated() {this.$nextTick(() > {this.$refs[inventorySumTable].doLayout();});},完整代码&#xff1a; // show-summary&#xff1a…

【PyTorch】图像多分类项目部署

【PyTorch】图像多分类项目 【PyTorch】图像多分类项目部署 如果需要在独立于训练脚本的新脚本中部署模型&#xff0c;这种情况模型和权重在内存中不存在&#xff0c;因此需要构造一个模型类的对象&#xff0c;然后将存储的权重加载到模型中。 加载模型参数&#xff0c;验证模型…

人工智能与机器学习原理精解【6】

文章目录 数值优化基础理论凹凸性定义在国外与国内存在不同国内定义国外定义总结示例与说明注意事项 国内凹凸性二阶定义的例子凹函数例子凸函数例子 凸函数&#xff08;convex function&#xff09;的开口方向凸函数的二阶导数凸函数的二阶定义单变量函数的二阶定义多变量函数…

设计模式第三天|设计模式结构型:适配器模式、装饰器模式、代理模式

文章目录 设计模式的分类适配器模式概念俗话说角色具体应用(Spring MVC)图解具体步骤 装饰器模式定义核心俗话说类名表现图解具体构造代码实现简化优点缺点 代理模式(Spring AOP 面向切面)定义俗话说角色代理模式分类静态代理角色代码好处缺点实用 动态代理 AOP什么是AOP具体信…

BFF:优化前后端协作设计模式

BFF&#xff1a;优化前后端协作设计模式 BFF是什么 BFF即 Backends For Frontends (服务于前端的后端)。是一种介于前端和后端之间一种重要的通信设计模式。它旨在解决前端与后端协作中的复杂性问题。 背景 行业背景&#xff1a;传统前端应用&#xff08;如Web应用、移动应…

《深入探秘Java中的枚举:掌握Enum的魔力》

目录 &#x1f4dd; 枚举枚举的定义枚举的使用1、表示一组固定常量2、实现接口3、枚举与策略模式4、EnumSet5、EnumMap &#x1f4ce; 参考文章 &#x1f600; 准备好了吗&#xff1f;让我们一起步入这座Java神奇的城堡&#xff0c;探寻枚举&#xff08;Enum&#xff09;这个强…

Ubuntu 修改源地址

注意事项&#xff1a;版本说明&#xff01;&#xff01;&#xff01; Ubuntu24.04的源地址配置文件发生改变。 不再使用以前的 sources.list 文件&#xff0c;该文件内容变成了一行注释&#xff1a; # Ubuntu sources have moved to /etc/apt/sources.list.d/ubuntu.sources…

STM32-FreeRTOS快速学习

定义 FreeRTOS 满足实施系统对任务响应时间的要求。 实时操作系统、轻量级&#xff08;内核小&#xff0c;只需要几KB的ROM和RAM&#xff09;、 提供了一些内核功能&#xff0c;如任务管理、时间管理、内存管理和通信机制等。 和裸机的区别 裸机&#xff1a;无操作系统&…

产品系统的UI暗色系和浅色系模式切换是符合人体视觉工程学的设计

视觉革命&#xff1a;UI设计中的暗夜与黎明 UI设计如同夜空中最亮的星辰&#xff0c;引领着用户穿梭于信息的海洋。而今&#xff0c;一场视觉革命正在悄然上演&#xff0c;它关乎于我们的眼睛&#xff0c;关乎于我们的体验——那就是产品系统的UI暗色系和浅色系模式的切换。如…

【机器学习】Jupyter Notebook如何使用之基本步骤和进阶操作

引言 Jupyter Notebook 是一个交互式计算环境&#xff0c;它允许创建包含代码、文本和可视化内容的文档 文章目录 引言一、基本步骤1.1 启动 Jupyter Notebook1.2 使用 Jupyter Notebook 仪表板1.3 在笔记本中工作1.4 常用快捷键1.5 导出和分享笔记本 二、进阶用法2.1 组织笔…

Excel超级处理器,工作簿文件.xls/.xlsx/.csv相互批量转换

如何将.xlsx文件转成.csv文件&#xff0c;.xls转换成.xlsx文件&#xff0c;以及.xls文件转成.csv文件或.csv转换成.xlsx文件&#xff0c;如果是单个文件转换&#xff0c;那么将当前文件另存为&#xff0c;保存类型&#xff0c;选择即可。如下图所示&#xff1a; 如果是多个文件…

【AutoDL】AutoDL+Xftp+Xshell+VSCode配合使用教程

身边没有显卡资源或不足以训练模型时&#xff0c;可以租赁服务器的显卡。 1、AutoDL Step :注册账号->选择显卡->选择环境->开机启动 1.1 首先打开AutoDL官网&#xff0c;注册账号 1.2 租赁自己想要的显卡资源 1.3 选择基础环境。 此处&#xff0c;我们让其自动配置…

[网络通信原理]——TCP/IP模型—网络层

网络层 网络层概述 网络层位于OSI模型的第三层&#xff0c;它定义网络设备的逻辑地址&#xff0c;也就是我们说的IP地址&#xff0c;能够在不同的网段之间选择最佳数据转发路径。在网络层中有许多协议&#xff0c;其中主要的协议是IP协议。 IP数据包格式 IP数据报是可变长度…

Linux服务器配置Python+PyTorch+CUDA深度学习环境

参考博主Linux服务器配置PythonPyTorchCUDA深度学习环境_linux cuda环境配置-CSDN博客 https://blog.csdn.net/NSJim/article/details/115386936?ops_request_misc&request_id&biz_id102&utm_termlinux%E8%99%9A%E6%8B%9F%E7%8E%AF%E5%A2%83%E6%8C%89pytorch%20c…

微信答题小程序产品研发-需求分析与原型设计

欲知应候何时节&#xff0c;六月初迎大暑风。 我前面说过&#xff0c;我决意仿一款答题小程序&#xff0c;所以我做了大量的调研。 题库软件产品开发不仅仅是写代码这一环&#xff0c;它包含从需求调研、分析与构思、设计到开发、测试再到部署上线一系列复杂过程。 需求分析…