element UI getSummaries多行合计 计算不同的值

对于 Element UI 的表格组件，要实现多行合计并计算不同的值，可以使用 `getSummaries` 方法来自定义合计行的计算逻辑。

首先，在表格组件的配置中，添加 `show-summary` 属性来启用合计行显示：

<el-table
  :data="tableData"
  show-summary
>
  <!-- 表格列配置 -->
</el-table>

然后，在表格组件的配置中，定义 `getSummaries` 方法来计算合计行的值：

<template>
  <!-- 表格组件 -->
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // 表格数据
      ]
    };
  },
  methods: {
    getSummaries(param) {
      const { columns, data } = param;
      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) => {
          const value = Number(curr);
          if (!isNaN(value)) {
            return prev + curr;
          } else {
            return prev;
          }
        }, 0);
      });
      return sums;
    }
  }
};
</script>

上述代码中，`getSummaries` 方法接收一个参数 `param`，包含了当前表格的列信息 `columns` 和数据 `data`。我们可以根据需要自定义每列的合计逻辑。

在示例中，我们只对第一列进行简单的合计，其他列根据列的 `property` 属性来计算合计值。首先，我们通过 `map` 方法将每行的对应列的值取出，并转换为数字类型。然后，使用 `reduce` 方法将所有行的值累加，并返回合计值。

最后，在表格组件的配置中，将 `getSummaries` 方法绑定到 `summary-method` 属性上：

<el-table
  :data="tableData"
  show-summary
  :summary-method="getSummaries"
>
  <!-- 表格列配置 -->
</el-table>

这样就可以实现多行合计并计算不同的值的需求了。根据实际情况，你可以根据需要修改 `getSummaries` 方法中的合计逻辑。