当前位置: 首页 > news >正文

解决element-plus table组件 fixed=“right“(left)浮动后横向滚动文字穿透的问题

BUG

版本:element-plus 2.6.1

浏览器:360极速浏览器22.1 (Chromium内核)

组件:el-table组件

问题:在头部/尾部浮动加上斑马条纹后,横向滚动存在文字穿透的问题。具体如图:

白色背景行的文字,在滚动时,发生了穿透

解析

目前神奇的是,在灰色背景条纹行,文字没有穿透

查看生成结构,偶数行是这个样式控制的

看看el-table__row--striped的作用:

也就是说el-table__row--striped给下级所有的table_cell补了个底色。

而默认是什么颜色呢,看看没有el-table__row--striped作用的:

是继承上级tr的透明背景色,难怪叠加起来文字会重叠,背景透明不重叠才怪

解决

找到问题后,解决方案也很简单。在scss里给非strip的行补一个样式就好:

<style lang="scss">
.cc-list-view {.el-table__header {background-color: var(--el-background-color-base);}tr.el-table__row {/* 解决横向滚动文字穿透的问题 */&.el-table__row--striped {.el-table__cell {background-color: var(--el-table-row-hover-bg-color) !important;}}&:not(.el-table__row--striped) {background-color: var(--el-bg-color) !important;}}
}
</style>

再看已经正常了

相关文章:

  • 【北邮国院大三下】Cybersecurity Law 网络安全法 Week1【更新Topic4, 5】_cyber security la
  • 12.自定义的多帧缓存架构
  • 【PostgreSQL】技术传承:使用Docker快速部署PostgreSQL数据库
  • 游戏引擎中的物理系统
  • 深入探讨string类的奥秘
  • 数据库的简单查询
  • 深入浅出 -- 系统架构之分布式多形态的存储型集群
  • 使用阿里云试用Elasticsearch学习:3.1 处理人类语言——开始处理各种语言
  • 如何进行Python程序的性能优化?
  • 云计算的安全需求
  • 网易雷火 暑期实习提前批一面(48min)
  • 【vite】-【vite介绍】-【vite的基础应用】-【vite的高级应用】-【
  • 【故事】无人机学习之旅
  • QT 线程之movetothread
  • JVM 组成
  • 【许晓笛】 EOS 智能合约案例解析(3)
  • Android框架之Volley
  • Bytom交易说明(账户管理模式)
  • CSS居中完全指南——构建CSS居中决策树
  • github指令
  • Java应用性能调优
  • JS创建对象模式及其对象原型链探究(一):Object模式
  • JS学习笔记——闭包
  • Koa2 之文件上传下载
  • React-Native - 收藏集 - 掘金
  • SQL 难点解决:记录的引用
  • TypeScript迭代器
  • vue-router 实现分析
  • 解决iview多表头动态更改列元素发生的错误
  • 开放才能进步!Angular和Wijmo一起走过的日子
  • 使用API自动生成工具优化前端工作流
  • 数据科学 第 3 章 11 字符串处理
  • “十年磨一剑”--有赞的HBase平台实践和应用之路 ...
  • 【干货分享】dos命令大全
  • scrapy中间件源码分析及常用中间件大全
  • #我与Java虚拟机的故事#连载04:一本让自己没面子的书
  • #我与Java虚拟机的故事#连载17:我的Java技术水平有了一个本质的提升
  • $NOIp2018$劝退记
  • (2)STL算法之元素计数
  • (二)换源+apt-get基础配置+搜狗拼音
  • (附源码)ssm跨平台教学系统 毕业设计 280843
  • (三)mysql_MYSQL(三)
  • (十一)c52学习之旅-动态数码管
  • (转)IIS6 ASP 0251超过响应缓冲区限制错误的解决方法
  • (转)Sublime Text3配置Lua运行环境
  • (转)视频码率,帧率和分辨率的联系与区别
  • .NET Core、DNX、DNU、DNVM、MVC6学习资料
  • .Net Core/.Net6/.Net8 ,启动配置/Program.cs 配置
  • .NET简谈互操作(五:基础知识之Dynamic平台调用)
  • .net实现客户区延伸至至非客户区
  • /使用匿名内部类来复写Handler当中的handlerMessage()方法
  • @SuppressWarnings(unchecked)代码的作用
  • [Android Pro] android 混淆文件project.properties和proguard-project.txt
  • [Angular 基础] - 自定义指令,深入学习 directive
  • [Asp.net mvc]国际化