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

news/2024/7/10 2:18:50 标签: scss, elementplus, elementui, vue, css

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的透明背景色,难怪叠加起来文字会重叠,背景透明不重叠才怪

解决

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

css"><style lang="css>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>

再看已经正常了


http://www.niftyadmin.cn/n/5471012.html

相关文章

运用抽象工厂模式实现多个产品族的独立创建与组合管理

抽象工厂模式&#xff08;Abstract Factory Pattern&#xff09; 是一种软件设计模式&#xff0c;属于创建型设计模式类别&#xff0c;主要用于处理对象的创建过程&#xff0c;特别是在应对具有多个相关或相互依赖对象的特定上下文时。该模式的主要目的是将一组相关或者相互依赖…

MySQL数据库——1.创建数据库

在 MySQL 数据库中&#xff0c;要创建一个新的数据库&#xff0c;可以使用 SQL 命令 CREATE DATABASE。创建数据库是管理数据的第一步&#xff0c;它提供了一个容器&#xff0c;用于存储表、视图、存储过程等数据库对象。 示例&#xff1a; CREATE DATABASE my_database; 在…

CSS3新增的语法(二)

CSS3新增的语法&#xff08;二&#xff09; 6.CSS3新增边框属性6.1 边框圆角6.2 边框外轮廓&#xff08;了解&#xff09; 7.CSS3新增文本属性7.1 文本阴影7.2 文本换行7.3 文本溢出7.4 文本修饰7.5 文本描边 8. CSS3 新增渐变8.1 线性渐变8.2 径向渐变8.3 重复渐变 9. web 字体…

Invarient facial recongnition

for later~ 代码阅读 1. 加载trainset import argparse import logging import os import numpy as npimport torch from torch import distributed from torch.utils.data import DataLoader from torch.utils.tensorboard import SummaryWriterfrom backbones import get_…

【卫星家族】 | 高分六号卫星影像及获取

1. 卫星简介 高分六号卫星&#xff08;GF-6&#xff09;于2018年6月2日在酒泉卫星发射中心成功发射&#xff0c;是高分专项中的一颗低轨光学遥感卫星&#xff0c;也是我国首颗精准农业观测的高分卫星&#xff0c;具有高分辨率、宽覆盖、高质量成像、高效能成像、国产化率高等特…

windows版本-idea中下载的java版本在哪

1、点击idea的file-projectStructure 进入&#xff1a; 通过电脑目录进入该目录 找到bin目录&#xff0c;copy该目录地址 copy下来之后设置到系统环境变量中

【QT+QGIS跨平台编译】056:【pdal-dimbuilder+Qt跨平台编译】(一套代码、一套框架,跨平台编译)

点击查看专栏目录 文章目录 一、pdal介绍二、dimbuilder介绍三、pdal下载四、文件分析五、pro文件六、编译实践七、生成Dimension.hpp八、生成pdal_features.hpp一、pdal介绍 PDAL(Point Data Abstraction Library)是一个开源库,用于处理点云数据的获取、过滤、转换、分析和…

从无到有开始创建动态顺序表——C语言实现

顺序表的概念 顺序表的底层结构是数组&#xff0c;对数组的封装&#xff0c;实现了常用的增删改查等接口。在物理结构和逻辑结构都是连续的&#xff0c;物理结构是指顺序表在计算机内存的存储方式&#xff0c;逻辑结构是我们思考的形式&#xff0c;顺序表和数组是类似的&#x…