el-table自定义表格数据

如上所示：

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

需要变更为：

截至到当前名次段总人数（上次考试） / 截至到当前名次段总人数（本次考试）
人数最多的班级标红，加粗；人数最少的班级标蓝，加粗。

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

复制代码

 <el-table
      :data="rankData"
      style="width: 100%"
      :header-cell-style="headerStyleEvent"
      border
      class="pptTable"
      :cell-style="cellStyle"
    >

      <el-table-column prop="l51A100" label="51-100" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.l51A100 }}/{{ scope.row.l1A50 + scope.row.l51A100 }}</span>
        </template>
      </el-table-column>
    
      <el-table-column prop="l401A450" label="401-450" align="center">
        <template slot-scope="scope">
          <span
            >{{ scope.row.l401A450 }}/{{
              scope.row.l1A50 +
              scope.row.l51A100 +
              scope.row.l101A150 +
              scope.row.l151A200 +
              scope.row.l201A250 +
              scope.row.l251A300 +
              scope.row.l301A350 +
              scope.row.l351A400 +
              scope.row.l401A450
            }}</span
          >
        </template>
      </el-table-column>
    </el-table>

优化后的代码：

复制代码

<template>
  <div>
    <p class="pptTitle">各班各名次段人数(年级所有人)</p>
    <el-table
      :data="rankData"
      style="width: 100%"
      :header-cell-style="headerStyleEvent"
      border
      class="pptTable"
      :cell-style="cellStyle"
    >
      <el-table-column prop="classNo" label="班级"> </el-table-column>
      <el-table-column
        v-for="(item, index) in range"
        :key="index"
        :prop="item.value"
        :label="item.name"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row[item.value] }}/{{ accumulate(index, scope.$index) }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mixins } from "./mixins";
import _ from "lodash";
export default {
  mixins: [mixins],
  props: {
    rankData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {};
    return {
      range: [
        {
          name: "1-50",
          value: "l1A50"
        },
        {
          name: "51-100",
          value: "l51A100"
        },
        {
          name: "101-150",
          value: "l101A150"
        },
        {
          name: "151-200",
          value: "l151A200"
        },
        {
          name: "201-250",
          value: "l201A250"
        },
        {
          name: "251-300",
          value: "l251A300"
        },
        {
          name: "301-350",
          value: "l301A350"
        },
        {
          name: "351-400",
          value: "l351A400"
        },
        {
          name: "401-450",
          value: "l401A450"
        }
      ]
    };
  },
  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;
    }
  }
};
</script>
<style lang="scss" scoped>
.el-table {
  border: 1px solid #000;
}
</style>

关键代码：

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方法：

<template slot-scope="scope">

<span>{{ scope.row $item.value$ }}/{{ accumulate(index, scope.$index) }}</span>

</template>

以上是第一版的实现方式

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

截至到当前名次段总人数（上次考试） / 截至到当前名次段总人数（本次考试）
人数最多的班级标红，加粗；人数最少的班级标蓝，加粗。

完成如下：