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

再看已经正常了

相关推荐
军军君0110 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具四:后端项目基础框架搭建下
spring boot·spring·面试·elementui·typescript·uni-app·mybatis
chao_78911 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
中微子13 小时前
CSS 的 position 你真的理解了吗?
前端·css
寻觅~流光14 小时前
封装---统一封装处理页面标题
开发语言·前端·javascript·vue.js·typescript·前端框架·vue
喝西瓜汁的兔叽Yan14 小时前
小效果--多行文本溢出出现省略号
前端·css
好青崧14 小时前
单页面和多页面的区别和优缺点
前端·vue
拾光拾趣录14 小时前
前端响应式布局:手把手实现智能PX转REM
前端·javascript·css
程序猿小D15 小时前
[附源码+数据库+毕业论文+答辩PPT+部署教程+配套软件]基于SpringBoot+MyBatis+MySQL+Maven+Vue实现的交流互动管理系统
spring boot·mysql·vue·mybatis·毕业论文·答辩ppt·交流互动
归于尽17 小时前
从按钮 "跳帧" 到 3D 翻书:CSS 动画进阶的 "三级跳"
前端·css
归于尽19 小时前
别再纠结布局了!Flex 和 Grid 的 “神仙操作” 都在这
前端·css