解决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的行补一个样式就好:

css 复制代码
<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>

再看已经正常了

相关推荐
Alice-YUE1 天前
【css学习笔记8】html5css3新特性
css·笔记·学习
沐墨专攻技术1 天前
二、网页的“化妆师”:从零学习 CSS
css·笔记·学习
吃饭最爱1 天前
⽹络请求Axios的概念和作用
vue
少年阿闯~~1 天前
transition(过渡)和animation(动画)——CSS
前端·css·动画·过渡
Async Cipher1 天前
CSS 继承 (Inheritance)
前端·css
魂尾ac1 天前
Django + Vue3 前后端分离技术实现自动化测试平台从零到有系列 <第一章> 之 注册登录实现
后端·python·django·vue
闲人编程1 天前
前端形态与样式风格:从古典到现代的视觉语言演进
前端·css·状态模式·组件·js·风格·响应式
昔人'1 天前
css 高度从 0 到 auto 的动画效果 `interpolate-size: allow-keywords`
前端·css
冲!!1 天前
SCSS 中的Mixins 和 Includes,%是什么意思
前端·css·scss
梦6501 天前
CSS新特性
css