BUG
版本:element-plus 2.6.1
浏览器:360极速浏览器22.1 (Chromium内核)
组件:el-table组件
问题:在头部/尾部浮动加上斑马条纹后,横向滚动存在文字穿透的问题。具体如图:
![](https://file.jishuzhan.net/article/1776529150752854017/d4f658fdba3f842ccd943426937a82f2.webp)
白色背景行的文字,在滚动时,发生了穿透
解析
目前神奇的是,在灰色背景条纹行,文字没有穿透
查看生成结构,偶数行是这个样式控制的
![](https://file.jishuzhan.net/article/1776529150752854017/123f4b72da92d2c1480f0d044d2ad70c.webp)
看看el-table__row--striped的作用:
![](https://file.jishuzhan.net/article/1776529150752854017/ac882d880e4a2fb96e49e6a57fbcfbb4.webp)
也就是说el-table__row--striped给下级所有的table_cell补了个底色。
而默认是什么颜色呢,看看没有el-table__row--striped作用的:
![](https://file.jishuzhan.net/article/1776529150752854017/cb33c2cd61b496405be817e4437b5b87.webp)
是继承上级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>
再看已经正常了
![](https://file.jishuzhan.net/article/1776529150752854017/123764652faf7ec0a868ff1d247cdecc.webp)