el-table合计 以及---合计行的合并_el-table 合计

话不多说直接贴代码----效果图

<template>
  <div style='height: 800px;width: 100%;background: #fff;'>
    <el-table  ref="table" border :data="tableData" :span-method="objectSpanMethod" stripe class="table-class" show-summary :summary-method="getNodeSummaries" highlight-current-row>
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column prop="name" label="名字" align="center" />
      <el-table-column prop="sex" label="性别" width="120" align="center" />
      <el-table-column prop="tiZh" label="体重" width="120" align="center" />
      <el-table-column prop="num1" label="数学" width="120" align="center" />
      <el-table-column prop="num2" label="英语" width="120" align="center" />
      <el-table-column prop="num3" label="语文" width="120" align="center" />
    </el-table>
  </div>
</template>

<script>
// import { ref } from 'vue'
export default {
  name: 'aaaa',
  components: {},
  props: {},
  data() {
    return {
      tableData: [
        {       
          name: '张三',
          sex: '男',
          tiZh: 120,
          num1: 1000,
          num2: 2000,
          num3: 3000
        },{       
          name: '张四',
          sex: '女',
          tiZh: 120,
          num1: 1000,
          num2: 2000,
          num3: 3000
        },
      ],
    }
  },
  computed: {},
  mounted() {},
  methods: {
    objectSpanMethod() {
      this.$nextTick(x => {
      if (this.$refs.table.$el) {
          var current = this.$refs.table.$el
            .querySelector(".el-table__footer-wrapper")
            .querySelector(".el-table__footer");
          var cell = current.rows[0].cells;
          cell[0].style.display = "none";
          cell[1].style.display = "none";
          cell[2].style.display = "none";
          cell[3].classList.remove('is-left')
          cell[3].colSpan = "4";
        }
      })
    },
    getNodeSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      let arr = [ 'num1', 'num2', 'num3']
      columns.forEach((column, index) => {
        if (index === 3) {
          sums[index] = "合计";
          return;
        }
        if (arr.some(x => column.property === x)) {
          sums[index] = 0;
          data.map((item) => {
            console.log(item)
            let num = item[column.property];
            // num = num ? parseFloat(num.replace(/,/gi, "")) : 0;
            sums[index] = this.accAdd(sums[index], num);
          });
        } else {
          sums[index] = "";
        }
      });
      return sums;
    },
    accAdd(arg1, arg2) {
      let r1, r2, m;
      try {
        r1 = arg1.toString().split(".")[1].length;
      } catch (e) {
        r1 = 0;
      }
      try {
        r2 = arg2.toString().split(".")[1].length;
      } catch (e) {
        r2 = 0;
      }
      m = Math.pow(10, Math.max(r1, r2));
      return ((arg1 * m + arg2 * m) / m).toFixed(2);
    },
  }
}
</script>

<style lang='scss' scoped>
  .table-class{
    width: 50%;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111