当前位置: 首页 > 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>

再看已经正常了

相关文章:

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

BUG 版本&#xff1a;element-plus 2.6.1 浏览器&#xff1a;360极速浏览器22.1 (Chromium内核) 组件&#xff1a;el-table组件 问题&#xff1a;在头部/尾部浮动加上斑马条纹后&#xff0c;横向滚动存在文字穿透的问题。具体如图&#xff1a; 白色背景行的文字&#xff0c…...

【opencv】示例-distrans.cpp 距离变换

stuff.jpg #include <opencv2/core/utility.hpp> // 包含OpenCV中的核心功能支持库 #include "opencv2/imgproc.hpp" // 包含OpenCV中的图像处理库 #include "opencv2/imgcodecs.hpp" // 包含OpenCV中的图像编解码库 #include "open…...

LVGL V8 代码细读——极致的链表使用

极致的链表的使用 序章碎碎念从redis源码里掏出来的adlist极致的精简的list.hlvgl对链表的巧思lv_ll尾记 序章碎碎念 对于链表&#xff0c;大家应该都不陌生。学过数据结构的&#xff0c;都知道它作为链式储存的基础&#xff0c;重要性不言而喻。 由于本人自动化专业&#xff…...

蓝桥杯第十二届c++大学B组详解

目录 1.空间 2.直线 3.路径 4.卡片 5.货物摆放 6.时间显示 7.砝码称重 8.杨辉三角 9.双向排序 10.括号序列 1.空间 题目解析&#xff1a;1Byte 8bit 1kb 1024B 1MB 1024kb; 先将256MB变成Byte 256 * 1024 * 1024; 再将32位 变成Byte就是 32 / 8 4&#xff1b;…...

Tubi 十岁啦!

Tubi 今年十岁了&#xff0c;这十年不可思议&#xff0c;充满奇迹&#xff01; 从硅谷一个名不见经传的创业小作坊&#xff0c;转变成为四分之一美国电视家庭提供免费流媒体服务的北美领先的平台&#xff1b; 从费尽心力终于签下第一笔内容合作协议&#xff0c;到现在与 450 …...

Qt C++ 实现文件监视源码

以下是使用Qt C++实现文件监视的一个简单示例代码: #include <QCoreApplication> #include <QFileSystemWatcher> #include <QDebug>int main(int argc, char *argv[...

蓝桥杯第十一届c++大学B组详解

目录 1.字符串排序 2.门牌制作 3.即约分数 4.蛇型填数 5.跑步锻炼 6.七段码 7.成绩统计 8.回文日期 9.字串分值和 10.平面切分 1.字符串排序 题目解析&#xff1a;这个题目真没搞懂。有会的大佬教我一下谢谢。 2.门牌制作 题目解析&#xff1a;出过超级多这类题目&am…...

大模型日报2024-04-10

大模型日报 2024-04-10 大模型资讯 微软研究者提出通过可视化思维提升大型语言模型的空间推理能力 摘要: 微软研究者近日提出了一种新方法&#xff0c;旨在通过可视化思维来增强大型语言模型&#xff08;LLMs&#xff09;的空间推理能力。尽管LLMs在语言理解和推理任务方面表现…...

redis修改协议改了,有哪些替代品?

Redis 是一款广泛使用的开源内存数据结构存储&#xff0c;它支持多种数据结构&#xff0c;如字符串、哈希表、列表、集合、有序集合等。然而&#xff0c;由于 Redis 最近更改了其开源许可证&#xff0c;一些用户和开发者可能正在寻找替代品。以下是一些 Redis 的替代品&#xf…...

《QT实用小工具·十六》IP地址输入框控件

1、概述 源码放在文章末尾 该项目为IP地址输入框控件&#xff0c;主要包含如下功能&#xff1a; 可设置IP地址&#xff0c;自动填入框。 可清空IP地址。 支持按下小圆点自动切换。 支持退格键自动切换。 支持IP地址过滤。 可设置背景色、边框颜色、边框圆角角度。 下面…...

windows 系统下 mysql 数据库的下载与安装(包括升级安装)

windows 系统下 mysql 数据库的下载与安装&#xff08;包括升级安装&#xff09; 一、mysql 介绍&#xff1a; MySQL 是一个关系型数据库管理系统&#xff0c;由瑞典 MySQL AB 公司开发&#xff0c;属于 Oracle 旗下产品。 MySQL 是最流行的关系型数据库管理系统之一&#xf…...

Redis Stack十部曲之三:理解Redis Stack中的数据类型

文章目录 前言String字符串作为计数器限制 List限制列表阻塞列表自动创建和删除聚合类型键限制 Set限制 Hash限制 Sorted Set范围操作字典操作更新分数 JSON路径限制 BitMapBitfieldProbabilisticHyperLogLogBloom filterCuckoo filtert-digestTop-KCount-min sketchConfigurat…...

OneForAll安装使用

OneForAll简介 OneForAll是一款功能强大的子域收集工具 原项目地址&#xff1a;GitHub - shmilylty/OneForAll: OneForAll是一款功能强大的子域收集工具 gitee项目地址&#xff1a;OneForAll: OneForAll是一款功能强大的子域收集工具 # 安装Python Windows系统安装python参…...

【现代C++】线程支持库

现代C&#xff08;C11及其之后的版本&#xff09;引入了标准的线程支持库&#xff0c;使得多线程编程变得更加简单和可移植。这个库提供了线程管理、互斥量、条件变量和其他同步原语。 1. std::thread - 基本线程 std::thread允许创建执行特定任务的线程。 #include <ios…...

游戏引擎架构01__引擎架构图

根据游戏引擎架构预设的引擎架构来构建运行时引擎架构 ​...

[Java、Android面试]_15_Android为什么使用Binder?

Android为什么使用Binder&#xff1f;用 Linux原有的IPC不行吗&#xff1f; 本人今年参加了很多面试&#xff0c;也有幸拿到了一些大厂的offer&#xff0c;整理了众多面试资料&#xff0c;后续还会分享众多面试资料。 整理成了面试系列&#xff0c;由于时间有限&#xff0c;每天…...

Python+Selenium+Unittest 之Unittest3(TestSuite()和TextTestRunner())

目录 1&#xff1a;addTest() 2、addTests() 3&#xff1a;discover() 上一篇说了Unittest的一个基本的执行顺序&#xff0c;那如果我们想要调整用例的执行先后顺序的话&#xff0c;可以用TestSuite()和TextTestRunner()了&#xff0c;可以这么理解&#xff0c;比如一个班级…...

3D桌面端可视化引擎HOOPS Visualize如何实现3D应用快速开发?

HOOPS Visualize是一个开发平台&#xff0c;可实现高性能、跨平台3D工程应用程序的快速开发。一些主要功能包括&#xff1a; 高性能、以工程为中心的可视化&#xff0c;使用高度优化的OpenGL或DirectX驱动程序来充分利用可用的图形硬件线程安全的C和C#接口&#xff0c;内部利用…...

Vue探索之Vue2.x源码分析(二)

一.Virtual Dom 虚拟DOM是一种轻量级的抽象&#xff0c;它允许我们在Javascript中创建、更新和删除DOM元素。它是React等现代Javascript框架的核心概念之一。 Vue的虚拟dom是一种抽象层的概念&#xff0c;它使得Vue可以高效地更新Dom。虚拟Dom是通过Javascript对象来表示DOM结…...

人工智能分类算法概述

文章目录 人工智能主要分类算法决策树随机森林逻辑回归K-均值 总结 人工智能主要分类算法 人工智能分类算法是用于将数据划分为不同类别的算法。这些算法通过学习数据的特征和模式&#xff0c;将输入数据映射到相应的类别。分类算法在人工智能中具有广泛的应用&#xff0c;如图…...

SkyWalking TTL配置实战:如何精准控制监控数据生命周期

1. 理解SkyWalking TTL的核心价值 当你的微服务集群每天产生TB级监控数据时&#xff0c;存储成本会像野马一样失控。去年我们一个电商项目就遇到过这样的困境——仅仅三个月ES集群就撑爆了200TB磁盘空间&#xff0c;而排查问题时发现99%的监控数据其实早已失效。这正是TTL&…...

如何用EuRoC数据集快速搭建VIO算法测试环境(附Python代码示例)

如何用EuRoC数据集高效构建VIO算法验证平台&#xff08;附Python实战&#xff09; 当我们需要验证视觉惯性里程计&#xff08;VIO&#xff09;算法时&#xff0c;一个高质量的数据集就像实验室里的精密仪器。EuRoC数据集正是这样一套"标准量具"&#xff0c;它由微型飞…...

从CTF题到实战:手把手教你用Python的sympy和gmpy2破解RSA变种(附完整脚本)

从CTF题到实战&#xff1a;手把手教你用Python的sympy和gmpy2破解RSA变种&#xff08;附完整脚本&#xff09; 在网络安全竞赛和实际渗透测试中&#xff0c;RSA加密算法的各种变种经常出现。这些变种往往通过引入特殊的数学性质或构造方式&#xff0c;使得标准的RSA攻击方法失效…...

并发编程进阶:volatile、内存屏障与 CPU 缓存机制详解

知识点回顾 1. 什么是CQRS&#xff1f; CQRS是Command Query Responsibility Segregation的缩写&#xff0c;一般称作命令查询职责分离。从字面意思理解&#xff0c;就是将命令&#xff08;写入&#xff09;和查询&#xff08;读取&#xff09;的责任划分到不同的模型中。 对比…...

深度解析LSPosed框架:从Hook原理到模块开发的完整实战指南

深度解析LSPosed框架&#xff1a;从Hook原理到模块开发的完整实战指南 【免费下载链接】LSPosed_mod My changes to LSPosed 项目地址: https://gitcode.com/GitHub_Trending/ls/LSPosed_mod LSPosed框架作为Android系统Hook技术的现代实现&#xff0c;为开发者提供了强…...

如何在广告泛滥的时代找到纯粹的音乐净土?铜钟音乐的极简听歌方案

如何在广告泛滥的时代找到纯粹的音乐净土&#xff1f;铜钟音乐的极简听歌方案 【免费下载链接】tonzhon-music 铜钟 (Tonzhon.com): 免费听歌; 没有直播, 社交, 广告, 干扰; 简洁纯粹, 资源丰富, 体验独特&#xff01;(密码重置功能已回归) 项目地址: https://gitcode.com/Gi…...

蚕豆剥豆机设计(机械原理设计)【设计说明书+机构简图+SW三维+stp通用格式+运动仿真】 备注:此份资料没有CAD装配

蚕豆剥豆机作为农业机械化的重要工具&#xff0c;其核心作用在于通过机械结构替代人工操作&#xff0c;显著提升剥豆效率并降低劳动强度。其设计需综合考量豆荚的物理特性、剥壳力传递路径及豆粒完整性保护等关键因素。机械原理设计以连杆机构、凸轮机构及夹持机构为基础&#…...

收藏!小白程序员也能轻松掌握大模型:VLLM入门指南与实战教程

收藏&#xff01;小白程序员也能轻松掌握大模型&#xff1a;VLLM入门指南与实战教程 VLLM是由伯克利大学LMSYS组织开源的大语言模型高速推理框架&#xff0c;通过PagedAttention技术、连续批处理和优化CUDA内核&#xff0c;显著提升模型推理吞吐量和内存效率。本文详细介绍了VL…...

BetterGI 0.38.1版本安装失败终极解决方案:从诊断到修复的完整指南

BetterGI 0.38.1版本安装失败终极解决方案&#xff1a;从诊断到修复的完整指南 【免费下载链接】better-genshin-impact &#x1f368;BetterGI 更好的原神 - 自动拾取 | 自动剧情 | 全自动钓鱼(AI) | 全自动七圣召唤 | 自动伐木 | 自动派遣 | 一键强化 - UI Automation Testi…...

uni-app实战:驰腾打印机蓝牙对接与二维码打印全解析

1. 为什么选择uni-app对接驰腾打印机&#xff1f; 在移动开发领域&#xff0c;跨平台解决方案越来越受到开发者青睐。uni-app作为一款基于Vue.js的跨平台框架&#xff0c;可以一次开发同时发布到iOS、Android以及各种小程序平台。这种特性使得它成为对接硬件设备的理想选择&am…...