element-ui table修改斑马条纹颜色

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第10天，点击查看活动详情

前言

最近在工作中用到了element-ui，修改table斑马条纹颜色属实是花了些时间。总结出来分享给大家，希望可以帮到有需要的人。

带斑马纹的表格

在<el-table>标签上添stripe 属性可以创建带斑马纹的表格。stripe 属性默认是true。

<el-table stripe>

修改斑马条纹颜色

首先，在<el-table>标签上添加row-class-name属性，row-class-name是列表行的回调方法，可以使用为所有行设置一个固定的 className。

<el-table stripe :row-class-name="onTableRowClassName">

row-class-name属性值可以是一个字符串也可以是函数function({ row, rowIndex })；

第一个参数 row 是当前行的数据, 第二个参数 rowIndex 是列表的当前行数。