关键代码
<template>
<el-table stripe
:data="tableData"
style="width: 100%"
:row-style="tableRowClassName">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
tableRowClassName({row, rowIndex}) {
let styleRes = {
"background": "#0181C2 !important"
}
if(this.multipleSelection.findIndex(item => item.id=== row.id) !== -1) {
return styleRes
}
}
问题
所设置的行的颜色隔行进行显示。
原因
相关的表格设置了stripe,即相关斑马行的显示,相关斑马行的颜色覆盖住了所设置的该行的颜色。
解决方案
去除掉在el-table中设置的stripe斑马行。
本文介绍了解决Vue Element UI中el-table使用stripe导致行颜色被覆盖的问题,通过移除stripe属性来实现自定义行颜色的正确显示。

1万+

被折叠的 条评论
为什么被折叠?



