pbl-teacher-table/src/components/pages/dataBoard/school/cateRank/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 label="排行" min-width="50" align="center">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column prop="name" label="类别名称" min-width="80" align="center">
        </el-table-column>
        <el-table-column prop="sum" label="课程数量" min-width="80" align="center">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    courseNumberArray: {
      type: Array,
    },
  },
  data() {
    return {
      tableData: [
        // { rank: "1", name: "一年级", sum: "2356" },
        // { rank: "2", name: "二年级", sum: "2256" },
        // { rank: "3", name: "三年级", sum: "2156" },
        // { rank: "4", name: "四年级", sum: "1356" },
        // { rank: "5", name: "五年级", sum: "1256" },
        // { rank: "6", name: "六年级", sum: "1056" },
      ],
    };
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "even_row";
      } else {
        return "";
      }
    },
    setArray(array){
      this.tableData = []
      for(var i = 0;i<array.length;i++){
        this.tableData.push({
          sum:array[i].course,
          name:array[i].name
        })
      }
      this.tableData = this.tableData.sort(function(a,b){
        return b.sum - a.sum;
      })
    }
  },
  watch: {
    courseNumberArray: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        this.setArray(newValue)
        this.$forceUpdate();
      },
    },
  },
  mounted() {
    this.setArray(this.courseNumberArray)
  },
};
</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;
}
</style>