el-table自定义表格数据

如上所示：

表格内的数据是：当前班级所在名次段的人数 / 当前班级1至n名的累计人数    5/12  也就是  5/7+5

需要变更为：

• 截至到当前名次段总人数（上次考试） / 截至到当前名次段总人数（本次考试）

• 人数最多的班级 标红，加粗；人数最少的班级 标蓝，加粗。

 先说一下第一种的实现方式：就是用这种笨办法，也能实现

优化后的代码：

关键代码： 

computed: {
    rankArr() {
      let newRank = _.cloneDeep(this.rankData);
      const accumulation = newRank.map(v => {
        delete v.classNo;
        return Object.values(v);
      });
      return accumulation;
    }
  },

  methods: {
    accumulate(index, columnIndex) {
      const countArr = this.rankArr[columnIndex].slice(0, index + 1);
      const sumByIndex = countArr.reduce((prev, cur, i) => {
        return prev + cur;
      }, 0);
      return sumByIndex;
    }
  } 

页面使用 accumulate方法：

 

以上是第一版的实现方式

现在来说说更新需求后的实现方式:(这里稍微复杂的点在颜色)

• 截至到当前名次段总人数（上次考试） / 截至到当前名次段总人数（本次考试）

• 人数最多的班级 标红，加粗；人数最少的班级 标蓝，加粗。

 完成如下：