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

当前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.mzph.cn/news/874954.shtml

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

相关文章

CentOS7使用Postfix, Dovecot搭建邮箱服务

CentOS7使用Postfix,Dovecot搭建邮箱服务的步骤与挑战? 为了满足企业内部或个人的邮件服务需求,使用CentOS7搭建一个稳定、安全的邮箱服务器是一个非常实用的解决方案。AokSend将详细介绍如何在CentOS7系统上使用Postfix和Dovecot搭建邮箱服…

Android源码目录结构概览

Android源码的目录结构是为了组织和模块化不同层次的系统组件而设计的。以下是Android源码目录结构的概览: abi: 应用二进制接口。art: 新的Android运行时环境(ART)。bionic: 系统C库。bootable: 启动引导相关代码。build: 系统构建规则和配…

linux系统进程占cpu 100%解决步骤

1.查找进程 ps aux 查看指定进程: ps aux | grep process_name2.根据进程查找对应的主进程 pstree -p | grep process_name 3.查看主进程目录并删除 ps -axu | grep process_name rm -rf /usr/bin/2cbbb

python可用于生产级别的日志模块

背景 生产环境中整个项目的日志信息需要每一天保存一个日志文件,日志保留的最大时间为30天。 自定义一个日志模块,代码如下: import os, logging from datetime import datetime from logging import handlersclass Logger:"""定义Logge…

修改 Tomcat 默认端口号最简单的方法

前言 每次在创建一个新的Maven项目之后,启动项目总会报8080端口号被占用的问题,既然每次都有这样的困扰,那不如一了百了,直接修改默认的8080端口号。 (如果还是想要默认端口号。可参考我主页文章杀死占用了8080的进程…

IB user verbs介绍

本文来自对内核源代码文档/Documentation/infiniband/user_verbs.rst的翻译和理解。 在Infiniband设备帮助下,跨计算机的两个进程可以相互访问对方的虚地址空间。在Linux操作系统上,支持进程能直接访问本地Infiniband设备的资源,从而实现跨机…

openmv学习笔记(24电赛笔记)

#opemv代码烧录清除详解 openmv的代码脱离IDE运行程序,只需要在IDE中将代码烧录道flash里面,断开IDE连接,上电之后,会自动执行main.py中的程序,IDE烧录的时候,会默认将程序后缀保存为 .py文件。 ​​​​​…

防爆智能手机如何助力电气行业保驾护航?

在电气行业的智能化转型浪潮中,防爆智能手机以其强大的数据处理能力、实时通讯功能及高度集成的安全特性,正成为保障电力网络稳定运行、预防安全隐患的得力助手。 防爆智能手机在电气行业中发挥着重要的保驾护航作用,主要体现在以下几个方面&…

Agent类型解析:AI生成内容(AIGC)在不同领域的应用与影响

在近年来,人工智能(AI)技术的迅猛发展已经极大地影响了我们的工作和日常生活。其中,AI生成内容(AIGC)作为人工智能领域的一大应用方向,已开始在多个行业中发挥其独特的作用。从媒体出版到软件开…

微信小程序 - 数组 push / unshift 追加后数组返回内容为数字(数组添加后打印结果为 Number 数值类型)

前言 假设一个空数组,通过 push 方法追加了一个项,控制台打印的结果竟然是 Number 数值。 例如,以下微信小程序代码: // 源数组 var arr = [] // 追加数据 var tem = arr.push(数据) // 查看结果 console.log(tem)

swagger-ui.html报错404

问题1:权限受限无法访问 由于采用的Shiro安全框架,需要在配置类ShiroConfig下的Shiro 的过滤器链放行该页面:【添加:filterChainDefinitionMap.put("/swagger-ui.html", "anon");】 public ShiroFilterFact…

Kubernetes Secret 详解

Kubernetes Secret 是一种用于存储和管理敏感信息的对象,如密码、OAuth 令牌和 SSH 密钥等。使用 Secret 可以避免将机密数据直接放在 Pod 规约或容器镜像中,从而增加了应用程序的安全性。 Secret 的类型 Kubernetes 支持多种类型的 Secret,包括: ​​Opaque​​:默认的…

node+mysql实现(账户密码,阿里云短信验证,QQ邮箱注册登录,短信验证密码重置,邮箱密码重置)之注册,登录密码重置总篇

node+mysql实现账户登录 注意效果图项目插件代码参数说明短信验证模块邮箱验证模块注册方式登录方式密码重置前端页面部分登录页面账户登录页面(login.html)短信验证登录页面(smsLogin.html)邮箱登录页面(emailLogin.html)注册部分页面短信验证注册页面(register.html)邮…

Python Word 操作全面指南

Word 是我们日常生活中经常使用的文档处理工具,而 Python 作为一种强大的编程语言,在处理 Word 文件方面也有着广泛的应用。本文将全面总结 Python Word 操作,包括如何使用 Python 来读取、写入、修改 Word 文件,以及如何使用 Pyt…

【C++高阶】深度剖析:从零开始模拟实现 unordered 的奥秘

📝个人主页🌹:Eternity._ ⏩收录专栏⏪:C “ 登神长阶 ” 🤡往期回顾🤡:哈希底层 🌹🌹期待您的关注 🌹🌹 ❀哈希 📒1. 改造 HashTable…

Qt多语言功能实现

本文介绍Qt多语言功能实现。 应用程序多语言支持是常用功能,比如产品需要出口到不同语种的国家。采用Qt的多语言支持工具可以方便实现应用程序的多语言功能。本文以中英文语言切换为例,简要介绍Qt的多语言功能实现。 1.界面设计 界面设计需要考虑使用…

正则表达式与文本三剑客之grep

目录 前言 一、grep命令 二、基础正则表达式常见元字符 2.1、特殊字符 2.2、定位符 2.3、非打印字符 三、元字符操作实例 3.1、查找特定字符 3.2、利用中括号“[]”来查找集合字符 3.3、查找行首“^”与行尾字符“$” 3.4、查找任意一个字符“.”与重复字符“*” 3.…

Pattern的多种匹配模式

参考: 好文→ Pattern的多种匹配模式 – 《JAVA编程思想》42 目录标题 单行匹配多行匹配正则匹配忽略大小写Unicode 字符集中的大小写敏感字符都将表示字面含义考虑字符的等价性会忽略正则表达式中的空格及#开始后面的部分只会将 \n 认作换行符\w 可以匹配任何语言…

BGP选路之Preferred value

原理概述 当一台BGP路由器中存在多条去往同一目标网络的BGP路由时,BGP协议会对这些BGP路由的属性进行比较,以确定去往该目标网络的最优BGP路由,然后将该最优BGP路由与去往同一目标网络的其他协议路由进行比较,从而决定是否将该最优…

fastadmin 批量上传图片

1.自定义按钮 <button type"button" id"faupload-local" class"btn btn-primary btn-danger faupload" data-input-id"c-local" data-multiple"true" data-preview-id"p-local" data-url"{:url(ajax/upl…