el-table同时添加小计和合计

效果：

1、在页面绘制表格。el-table使用show-summary可以自动生成一个合计行。代码如下：

  <div>
    <h1 class="info_title">表格添加合计和小计</h1>
    <!-- show-summary设置成true可以添加合计行 -->
    <!-- 也可以定义自己的合计逻辑。使用summary-method并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中 -->

    <el-table :data="list" show-summary :summary-method="getSummaries">
      <el-table-column align="center" prop="name" label="姓名" min-width="140"></el-table-column>
      <el-table-column align="center" prop="age" label="年龄" min-width="140"></el-table-column>
      <el-table-column align="center" prop="gender" label="性别" min-width="140">
        <template slot-scope="scope">
          <span v-if="scope.row.gender == 'F'">女</span>
          <span v-else-if="scope.row.gender == 'M'">男</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="birthday" label="出生日期" min-width="180"></el-table-column>
      <el-table-column align="center" prop="english_achievements" label="英语成绩" min-width="140"></el-table-column>
      <el-table-column align="center" prop="math_achievements" label="数学成绩" min-width="140"></el-table-column>
      <el-table-column align="center" prop="address" label="地址" min-width="180"></el-table-column>
      <el-table-column align="center" prop="phoneNumber" label="手机号" min-width="180"></el-table-column>
    </el-table>
  </div>
</template>
<script>
import { nextTick } from "vue";
export default {
  data() {
    return {
      list: [
        {
          name: "张三",
          age: 22,
          gender: "F",
          phoneNumber: "123456789",
          birthday: "2001年6月8日",
          address: "北京市XX区XX路",
          english_achievements: "95",
          math_achievements: "98"
        },
        {
          name: "李四",
          age: 22,
          gender: "M",
          phoneNumber: "123456789",
          birthday: "2001年6月8日",
          address: "北京市XX区XX路",
          english_achievements: "96",
          math_achievements: "98"
        },
        {
          name: "张三",
          age: 22,
          gender: "F",
          phoneNumber: "123456789",
          birthday: "2001年6月8日",
          address: "北京市XX区XX路",
          english_achievements: "89",
          math_achievements: "98"
        },
        {
          name: "李四",
          age: 22,
          gender: "M",
          phoneNumber: "123456789",
          birthday: "2001年6月8日",
          address: "北京市XX区XX路",
          english_achievements: "95",
          math_achievements: "98"
        },
        {
          name: "张三",
          age: 22,
          gender: "F",
          phoneNumber: "123456789",
          birthday: "2001年6月8日",
          address: "北京市XX区XX路",
          english_achievements: "98",
          math_achievements: "98"
        },
        {
          name: "李四",
          age: 22,
          gender: "M",
          phoneNumber: "123456789",
          birthday: "2001年6月8日",
          address: "北京市XX区XX路",
          english_achievements: "95",
          math_achievements: "98"
        },
        {
          name: "张三",
          age: 22,
          gender: "F",
          phoneNumber: "123456789",
          birthday: "2001年6月8日",
          address: "北京市XX区XX路",
          english_achievements: "95",
          math_achievements: "98"
        },
        {
          name: "李四",
          age: 22,
          gender: "M",
          phoneNumber: "123456789",
          birthday: "2001年6月8日",
          address: "北京市XX区XX路",
          english_achievements: "95",
          math_achievements: "98"
        },
        {
          name: "张三",
          age: 22,
          gender: "F",
          phoneNumber: "123456789",
          birthday: "2001年6月8日",
          address: "北京市XX区XX路",
          english_achievements: "95",
          math_achievements: "98"
        },
        {
          name: "李四",
          age: 22,
          gender: "M",
          phoneNumber: "123456789",
          birthday: "2001年6月8日",
          address: "北京市XX区XX路",
          english_achievements: "95",
          math_achievements: "98"
        }
      ],
      sumObject: { english_achievements: 1000, math_achievements: 888 } // 合计数据
    };
  }
};
</script>

2、因为需求是添加两行，一个合计一个小计，并保留两位小数。

小计为当前页面的累加和，合计为接口返回的数据（目前使用的假数据sumObject）。所以使用:summary-method="getSummaries"自定义合计行。

代码如下：

 methods: {
    // 合计和小计赋值
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      // 保留换行符    选中合计行的每一个元素，然后给每一个元素都添加css样式whiteSpace。
      this.$nextTick(() => {
        const elements = document.querySelectorAll(
          ".el-table__footer-wrapper div.cell"
        );
        elements.forEach(element => {
          // whiteSpace用于控制元素内部空白符（包括空格、换行符等）的处理方式。pre-wrap：表示浏览器会保留连续的空白符和换行符，且会自动换行。
          element.style.whiteSpace = "pre-wrap";
        });
      });

      // 以下是对小计和总计分别进行赋值
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "小计" + "\n" + "总计";
          return;
        }
        //将当前列的所有值存储到values中  注：非数字会返回NaN。
        const values = data.map(item => Number(item[column.property]));
        // 将要进行小计合计的字段组成一个数组
        let label = ["math_achievements", "english_achievements"];
        //如果label包含当前column.property，则进行数据处理
        if (label.includes(column.property)) {
          // 小计
          let Subtotal = values
            .reduce((prev, curr) => {
              const value = Number(curr);
              // 如果是数字则进行累加
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0)
            .toFixed(2);
          // 总计
          let allTotal = "";
          // 总计非0时添加两位小数
          if (this.sumObject.hasOwnProperty(column.property)) {
            // 判断是否是0.  如果this.sumObject[column.property]不是0，则!this.sumObject[column.property]为false。如果是0，则为true。
            if (!this.sumObject[column.property]) {
              allTotal = this.sumObject[column.property];
            } else {
              allTotal = this.sumObject[column.property].toFixed(2);
            }
          }
          sums[index] = Subtotal + "\n" + allTotal;
        } else {
          sums[index] = "";
        }
      });
      return sums;
    }
  }

3、css样式如下。

<style lang="scss" scoped>
.info_title {
  text-align: center;
  margin: 20px 0px;
}
/deep/ .el-table {
  overflow: auto;
  height: 300px;
}
//将滚动条显示在合计和小计的下方
/deep/ .el-table__body-wrapper,
.el-table__footer-wrapper,
.el-table__header-wrapper {
  overflow: visible !important;
}
// 不显示多余的线条
/deep/ .el-table--border::after,
.el-table--group::after,
.el-table::before {
  width: 0px;
}
//固定表头
/deep/ .el-table__header-wrapper {
  position: sticky;
  top: 0;
  z-index: 999;
}
</style>

如果没有自定义合计和小计，可以直接给el-table加一个:height="数字"，就可以固定表头。