pbl-teacher-table/src/components/pages/dataBoard/student/stuAct/index.vue

<template>
  <div class="data_body">
    <div style="width: 100%; height: 100%;">
      <el-table
        :data="tableData"
        style="width: 100%;"
        :header-cell-style="{ background: '#E0EAFB' }"
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="rank" label="Ranking" min-width="50" align="center">
        </el-table-column>
        <el-table-column
          prop="name"
          label="Category Name"
          min-width="80"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="sum" label="Number of Lessons Given" min-width="80" align="center">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { rank: "1", name: "Year 1", sum: "2356" },
        { rank: "2", name: "Year 2", sum: "2256" },
        { rank: "3", name: "Year 3", sum: "2156" },
        { rank: "4", name: "Year 4", sum: "1356" },
        { rank: "5", name: "Year 5", sum: "1256" },
        { rank: "6", name: "Year 6", sum: "1056" },
        { rank: "7", name: "Year 7", sum: "956" },
        { rank: "8", name: "Year 8", sum: "856" },
      ],
    };
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "even_row";
      } else {
        return "";
      }
    },
  },
};
</script>

<style scoped>
.el-table >>> .even_row {
  background-color: #f2f7ff !important;
}
.data_body {
  height: 100%;
  /* display: flex; */
  position: relative;
  border-radius: 5px;
  /* border: 1px solid #eee; */
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0;
  width: 95%;
  background: #fff;
  overflow: auto;
}
</style>