pbl-teacher-table/src/components/pages/dataBoardSies/school/cateRank/index.vue

<template>
  <div class="data_body">
    <div style="width: 100%; height: 100%;overflow: auto;">
      <el-table :data="tableData" style="width: 100%" :header-cell-style="{ background: '#E0EAFB',color: '#000' }"
        :row-class-name="tableRowClassName" class="tableClass">
        <el-table-column prop="subject" label="学科" min-width="30" align="center">
        </el-table-column>
        <el-table-column prop="score1" label="其他考试均分占比（%）" min-width="100" align="center">
        </el-table-column>
        <el-table-column prop="score2" label="期末分组占比（%）" min-width="90" align="center">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    courseNumberArray: {
      type: Array,
    },
  },
  data() {
    return {
      tableData: [
        { subject: "体育", score1: "60", score2: "40" },
        { subject: "信息技术", score1: "60", score2: "40" },
        { subject: "形体", score1: "60", score2: "40" },
        { subject: "数学", score1: "60", score2: "40" },
        { subject: "科学", score1: "60", score2: "40" },
        { subject: "美术", score1: "60", score2: "40" },
        { subject: "英语", score1: "60", score2: "40" },
        { subject: "语文", score1: "60", score2: "40" },
        { subject: "道德与法治", score1: "60", score2: "40" },
        { subject: "音乐", score1: "60", score2: "40" },
      ],
    };
  },
  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;
}

.tableClass >>> td, .tableClass >>> th{
  padding: 5px 0;
}
</style>