element table 数据表格指定行高亮写法
table写法

<el-table
:row-class-name=”tableRowClassName”
>
</el-table>
 
重点：数据表格上添加动态绑定样式，:row-class-name=”tableRowClassName”。

method中添加切换样式方法

tableRowClassName({row, rowIndex}) {
if (rowIndex === 0) {
return ‘highlight-row’;
}
return ”;
},
 
在这里可以实现高亮算法，我这里是指定了数据表格中的第一行高亮，前面数据表格的写法上就是在这里动态绑定的样式。所以还差一个高亮样式，在

<style scoped>
.el-table .highlight-row {
background: #cae3f9;
}
</style>

 
到这里，一个数据表格指定行的高亮，就已经实现了。

高亮样式不生效问题解决办法
不过上面的代码，是没法实现高亮的，因为 scoped 导致的样式不生效。

粗暴点的解决办法是直接删掉 scped ，但是会导致样式污染，简单点说就是会导致这个样式变成全局的，其他用到这个样式的地方都可能会被修改。

所以 scoped删不得，在样式中添加 /deep/ ，强制修改默认样式，让你定义的高亮样式生效。

把样式修改如下：

<style scoped>
.el-table /deep/ .highlight-row {
background: #cae3f9;
}
</style>

 
保存刷新页面，解决问题。

————————————————
版权声明：本文为CSDN博主「Let_me_tell_you」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Let_me_tell_you/article/details/125060133