需求

就是表格展示合计行，不是通过前端计算，是通过后台请求返参展示数据，话不多说，直接上代码

<template>
  <div>
    <el-table :data="tableData" style="width: 100%" :summary-method="getSummary" ref="myTable">
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="amount" label="Amount"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      total: 0,
    };
  },
  mounted() {
    // 在组件挂载后调用异步函数
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        // 模拟异步获取数据
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();

        // 更新表格数据
        this.tableData = data;

        // 获取合计数据
        const totalResponse = await fetch('https://api.example.com/total');
        const totalData = await totalResponse.json();

        // 更新合计数据
        this.total = totalData.total;

        // 在数据获取完成后手动更新表格的合计
        this.$nextTick(() => {
          this.$refs.myTable.doLayout();
        });
      } catch (error) {
        console.error('Error fetching data:', error);
        throw error;
      }
    },
    getSummary({ columns, data }) {
      // 在这里计算合计，可以使用this.total
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        sums[index] = values.reduce((prev, curr) => prev + curr, 0);
      });
      return sums;
    },
  },
};
</script>

总结

起初最开始准备直接异步调用getSummary()方法，但是只要async/await合计行就不展示，最好只好变通方法想到这个办法
当然让后台返参到数据接口是最合适不过的，我这里是因为后台说业务逻辑比较复杂，再加上合计，只会加长代码运行时间
有类似需求的小伙伴可以稍稍采纳