解决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>

再看已经正常了

相关推荐
喜欢敲代码的程序员12 小时前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
青皮桔12 小时前
CSS实现百分比水柱图
前端·css
失落的多巴胺12 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
华子w90892585913 小时前
基于 SpringBoot+Vue.js+ElementUI 的 “花开富贵“ 花园管理系统设计与实现7000字论文
vue.js·spring boot·elementui
666HZ66613 小时前
微信小程序中scss、ts、wxml
微信小程序·小程序·scss
海的诗篇_14 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
牧杉-惊蛰15 小时前
uniapp微信小程序css中background-image失效问题
css·微信小程序·uni-app
hackchen16 小时前
从0到1解锁Element-Plus组件二次封装El-Dialog动态调用
前端·vue.js·elementui
哎呦你好16 小时前
【CSS】Grid 布局基础知识及实例展示
开发语言·前端·css·css3
islandzzzz17 小时前
(第二篇)HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html