场景
在Vue中使用el-table显示数据，怎样设置标题栏的颜色和设置每一行
隔一行显示不同的颜色，实现效果如下
注：
博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
找到el-table标签添加如下样式和属性设置
<el-table
class="alarm"
v-loading="loading"
:header-cell-style="{ background: '#0080D0' }"
:row-class-name="tableRowClassName"
>然后class绑定的alarm样式的实现
<style>
.alarm .el-table__row td:nth-child(10) {
color: #3be6f8;
}
</style>row-class-name：行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。
然后row-class-name绑定的样式实现
tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 == 1) {
return "statistics-warning-row";
} else {
return "";
}
},
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/136336.html
