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>

以上是第一版的实现方式

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

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

各班各名次段人数变化(上次/本次)
<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"> {{ scope.row[item.label] }} / {{ scope.row[item.value] }} </template> </el-table-column> </el-table>
</template> <script> import { mixins } from "./mixins"; export default { mixins: [mixins], props: { rankData: { type: Array, default: () => [] } }, data() { return { range: [ { name: "1-50", value: "before50", label: "previousBefore50" }, { name: "1-100", value: "before100", label: "previousBefore100" }, { name: "1-150", value: "before150", label: "previousBefore150" }, { name: "1-200", value: "before200", label: "previousBefore200" }, { name: "1-250", value: "before250", label: "previousBefore250" }, { name: "1-300", value: "before300", label: "previousBefore300" }, { name: "1-350", value: "before350", label: "previousBefore350" }, { name: "1-400", value: "before400", label: "previousBefore400" }, { name: "1-450", value: "before450", label: "previousBefore450" } ] }; },
```
methods: {
  // 颜色
  computedStyle(value, prop) {
    const propData = this.rankData.map(e => e[prop]);
    // console.log(value, propData, prop);

    // console.log(Math.max.apply(null, propData), "ll");
    const max = Math.max.apply(null, propData);
    const min = Math.min.apply(null, propData);
    if (value === max) {
      return { color: "red", fontWeight: "bold" };
    }

    if (value === min) {
      return { color: "blue", fontWeight: "bold" };
    }

    return {};
  }
}
```
};
</script>
<style lang="scss" scoped> .el-table { border: 1px solid #000; } </style>

完成如下：