el-table中奇偶行背景色显示不同的颜色

<el-table
   ref="singleTable"
   :data="tableData"
   highlight-current-row
   @current-change="handleCurrentChange"
   :header-cell-style="{background:'#ECF0FB'}"
   :row-class-name="tableRowClassName"
   style="width: 100%">
   <el-table-column type="index" width="50"></el-table-column>
   <el-table-column prop="nickname"  label="昵称"></el-table-column>
   <el-table-column prop="emailAddress" label="邮箱地址"></el-table-column>
   <el-table-column prop="updateDate" label="创建时间"></el-table-column>
   <el-table-column label="操作" align="center">
       <template slot-scope="scope">
            <div v-if="scope.row.nickname==$store.state.basicInfo.xm">
                 <el-button @click="transform({id:scope.$index,type:'edit'})">修改</el-button>
                 <el-button @click="handleDelete(scope.$index)">删除</el-button>
            </div>
            <div v-else>
                 <el-button @click="transform({id:scope.$index,type:'edit'})">修改</el-button>
                 <el-button @click="handleDelete(scope.$index)">删除</el-button>
            </div>
       </template>
   </el-table-column>
</el-table>　

export default {

   data(){

     return{

       currentRow: null,

    }

  }，

methods:{
   //奇偶行背景色不同 
   setCurrent(row) {
     this.$refs.singleTable.setCurrentRow(row);
   },
   handleCurrentChange(val) {
     this.currentRow = val;
   },
   tableRowClassName({row, rowIndex}) {
     if ((rowIndex+1) % 2  === 0) {
        return 'success-row';
     }
     return '';
   },
}

}

.el-table .success-row {
    background: #F3F3F3;
}