【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搭建邮箱服…

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

修改 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文件。 ​​​​​…

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

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

swagger-ui.html报错404

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

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

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

【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.…

BGP选路之Preferred value

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

OAuth2.0 or Spring Session or 单点登录流程

1.社交登录 2.微博社交登录 第三方登录 1.登录微博 2.点击网站接入 3.填写完信息,到这里,写入成功回调 和 失败回调 是重定向,所以可以写本地的地址 3.认证 分布式Session spring-session 域名不一样 发的 jSessionId 就不同&#xff0c…

自定义element主题

说明:这里使用的是vue3做的demo,所以使用的是element-plus,不同版本大同小异 一、安装element-plus npm install element-plus --save二、在main.ts中引入 import ElementPlus from "element-plus"; import "element-plus/d…

Kubernetes学习指南:保姆级实操手册03——规划部署

Kubernetes学习指南:保姆级实操手册03——规划部署 一、部署节点规划 Hostnameiprolesk8s-master0110.255.210.1masterk8s-master0210.255.210.2masterk8s-master0310.255.210.3masterk8s-node0110.255.210.4worker nodek8s-node0210.255.210.5worker nodek8s-nod…

【深度学习】LDA线性判别分析

date:2024/07/23 author:sion tag:Deeping Learn LDA(线性判别分析) 文章目录 LDA(线性判别分析)1.LDA是什么LDA是一种解决二分类问题的线性方法。它描述,对于给定样例集,将样例点投影到一条直线上,这条直线能使异样的样例相距远,…

Linus: vim编辑器的使用,快捷键及配置等周边知识详解

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 vim的安装创建新用户 adduser 用户名Linus是个多用户的操作系统是否有创建用户的权限查看当前用户身份:whoami** 怎么创建设置密码passwdsudo提权(sudo输入的是用户…

Golang | Leetcode Golang题解之第275题H指数II

题目: 题解: func hIndex(citations []int) int {n : len(citations)return n - sort.Search(n, func(x int) bool { return citations[x] > n-x }) }

数驭未来,景联文科技构建高质大模型数据库

国内应用层面的需求推动AI产业的加速发展。根据IDC数据预测,预计2026年中国人工智能软件及应用市场规模会达到211亿美元。 数据、算法、算力是AI发展的驱动力,其中数据是AI发展的基石,中国的数据规模增长速度预期将领跑全球。 2024年《政府工…

go语言day15 goroutine

Golang-100-Days/Day16-20(Go语言基础进阶)/day17_Go语言并发Goroutine.md at master rubyhan1314/Golang-100-Days GitHub 第2讲-调度器的由来和分析_哔哩哔哩_bilibili 一个进程最多可以创建多少个线程?-CSDN博客 引入协程 go语言中内置了协程goroutine&#…