js 给 el-table 添加表尾合计行

你通过 `show-summary` 属性来开启表格的合计行，然后通过 `summary-method` 属性指定一个方法来计算表格数据的合计值。下面是一个简单的示例：

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

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, score: 90, rank: 1 },
        { name: '李四', age: 20, score: 85, rank: 2 },
        { name: '王五', age: 22, score: 95, rank: 1 },
        { name: '赵六', age: 19, score: 87, rank: 3 },
      ],
    };
  },
  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);
        sums[index] = parseFloat(sums[index].toFixed(2));
      });

      return sums;
    },
  },
};
</script>

在上面的例子中，我们定义了一个 `tableData` 数组来存储表格数据，然后在表格组件中设置了 `show-summary` 属性为 `true`，并且通过 `summary-method` 属性指定了一个方法 `getSum` 来计算表格数据的合计值。

在 `getSum` 方法中，我们首先通过解构赋值获取到传入的参数 `param`，然后从中获取到表格列信息 `columns` 和表格数据 `data`。接着，我们定义一个空数组 `sums` 来存储合计值，然后遍历表格列信息 `columns`，对每一列数据进行求和操作，并将结果存储到 `sums` 数组中。最后，我们返回计算出来的合计值数组 `sums`。

通过上面的示例，你可以轻松地给 `el-table` 添加表尾合计行。