el-table 自定义隔行变色

el-table 自定义隔行变色

主要实现的原理是利用每行的下标来实现单，偶区分，添加不同的样式

<el-table :data="tableData"  fit   :row-class-name="tableRowClassName">
       <el-table-column type="index" label="序号"></el-table-column>
       <el-table-column prop="name" label="名称"></el-table-column>
       <el-table-column prop="length" label="长度(km)" ></el-table-column>
 </el-table>

methods方法：

tableRowClassName({ rowIndex }) {
     if ((rowIndex + 1) % 2 === 0) {
          return 'oddRow';
     }
      return 'evenRow';
 },

style样式

.oddRow {
      //斑马纹样式
       color: white;
        background-color:rgba(15, 48, 60, .55);
}
 .evenRow {
         background-color: rgba(22,78,97, 0.55);
          color: white;
}