el-table 二次封装合计

针对 el-table 的二次封装合计，可以通过以下步骤实现：

1. 在表格中添加一个表头插槽，用于渲染合计行。
2. 在封装组件中计算需要合计的数据，并将其传入到表格中。
3. 在表格中添加一个表尾插槽，用于渲染合计行。
4. 在表格中使用 scopedSlots 来渲染表格行和表格列。

以下是一个简单的示例代码：

<template>
  <el-table :data="tableData" style="width: 100%">
    <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>
    <!-- 表头插槽 -->
    <template slot="header">
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>分数</th>
      </tr>
    </template>
    <!-- 表格行 -->
    <template slot-scope="scope">
      <tr>
        <td>{{ scope.row.name }}</td>
        <td>{{ scope.row.age }}</td>
        <td>{{ scope.row.score }}</td>
      </tr>
    </template>
    <!-- 表尾插槽 -->
    <template slot="footer">
      <tr>
        <td>合计</td>
        <td></td>
        <td>{{ getTotalScore }}</td>
      </tr>
    </template>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, score: 90 },
        { name: '李四', age: 19, score: 80 },
        { name: '王五', age: 20, score: 70 },
      ],
    }
  },
  computed: {
    getTotalScore() {
      return this.tableData.reduce((total, item) => total + item.score,0)
    },
  },
}
</script>