elementUI table 斑马纹

<el-table :data="tableData" :header-cell-style="{background:'#011550',color:'#5c8aaf'}" :row-class-name="toggleRowClassName" align="center"
          style="width: 376px" max-height="355px">

  <el-table-column label="学院" prop="name" width="180"/>
  <el-table-column label="实训室数量" prop="address"/>
  <el-table-column label="占比" prop="address">
    <template #default="scope">
      <div class="rate">
        {{  scope.row.address }}
      </div>
    </template>
  </el-table-column>
</el-table>
------------------------------------------------------------

tableData: [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No',
  },
],

-----------------------------------------------------
toggleRowClassName({row, rowIndex}) {
  if (rowIndex % 2 == 1) {
    return 'deep_row'
  } else {
    return 'light_row'
  }
}