el-table stripe 双重表格时，斑马纹颜色错乱

最新推荐文章于 2025-06-01 08:24:50 发布

JINMINGIS

最新推荐文章于 2025-06-01 08:24:50 发布

阅读量3.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：饿了么组件文章标签：饿了么组件

本文链接：https://blog.youkuaiyun.com/Yuoliku/article/details/108365890

在使用饿了么UI组件的el-table时，添加stripe属性形成斑马纹效果，当点击某行弹出新的表格时，斑马纹颜色出现错乱。原因是弹窗内的表格虽然没有–striped类，但由于继承导致仍受影响。通过修改外层表格tr的className，成功解决了这个问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在开发过程中遇到了这样一个问题，给表格组件加上了斑马纹，初看显示正常，但是但点击，斑马纹中的单元格，弹出另一个表格的时候发现界面效果变的很奇怪，如草图

正常显示效果，应为弹窗内表格亦是斑马纹，但是现在单击深色那一行出现的全部变成了同一个颜色，外层底色为白色的弹窗内表格显示正常。遇到这个一时之间还没想到是为啥会出现这种状态

然后就开始看css样式，乍一看还挺正常，隔行存在一个–striped class

继续往外层走发现是因为外层表格的 tr 也带了–striped class,即使弹窗内表格 tr没有–striped class 由于继承的原因，依旧受其影响
解决的想法，修改外层tr的className

this.$nextTick(()=>{//解决弹窗内表格受外层表格斑马纹影响 if(document.getElementsByClassName('el-table__row current-row el-table__row--striped').length!=0){ document.getElementsByClassName('el-table__row current-row el-table__row--striped')[0].className='el-table__row current-row ' } })

问题就解决啦