el-table 多个合计行

el-table 是 Element UI 提供的一个表格组件用于展示数据。它支持多个合计行的功能，可以通过配置项来实现。

要实多个合计行，需要在 el-table-column 中使用 scoped slot 来自定义合计行的内容。具体步骤如下：

1. 在 el-table 中设置 :show-summary 属性为 true，开启合计行的显示。
2. 在 el-table-column 中使用 scoped slot 来定义合计行的内容。可以使用 slot-scope 属性来获取当前列的数据。
3. 在 scoped slot 中，可以通过计算属性或方法来计算合计值，并将其展示在合计行中。

下面是一个示例代码：

<template>
  <el-table :data="tableData" :show-summary="true">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="score" label="分数" :summary-method="getTotal"></el-table-column>
    <el-table-column prop="rank" label="排名" :summary-method="getTotal"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, score: 80, rank: 1 },
        { name: '李四', age: 20, score: 90, rank: 2 },
        { name: '王五', age: 22, score: 85, rank: 3 }
      ]
    };
  },
  methods: {
    getTotal({ columns, data }) {
      const values = data.map(item => item[columns.property]);
      return values.reduce((total, value) => total + value, 0);
    }
  }
};
</script>

在上面的示例中，我们定义了两个合计行，分别计算了分数和排名的总和。通过 summary-method 属性指定了计算合计值的方法 getTotal。