el-table多级表头 合计

对于el-table多级表头的合计，可以使用el-table-column的prop属性来指定数据字段，然后在el-table-column中使用slot-scope来自定义表头内容，最后在el-table-column中使用header-cell-render来自定义表头单元格的渲染方式。在header-cell-render中可以使用this.$scopedSlots来获取自定义的表头内容，并通过计算属性来实现多级表头的合并和渲染。

示例代码如下：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column label="成绩">
      <el-table-column prop="math" label="数学" :header-cell-render="renderHeader"></el-table-column>
      <el-table-column prop="english" label="英语" :header-cell-render="renderHeader"></el-table-column>
      <el-table-column prop="chinese" label="语文" :header-cell-render="renderHeader"></el-table-column>
      <el-table-column label="总分" :header-cell-render="renderHeader">
        <template slot-scope="{ row }">{{ row.math + row.english + row.chinese }}</template>
      </el-table-column>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '小明', math: 80, english: 90, chinese: 85 },
        { name: '小红', math: 90, english: 85, chinese: 95 },
        { name: '小刚', math: 85, english: 95, chinese: 90 }
      ]
    }
  },
  methods: {
    renderHeader({ column, $index }) {
      if ($index === 0) {
        return {
          rowspan: 2,
          colspan: 1,
          content: column.label
        }
      } else if ($index === 1 || $index === 2 || $index === 3) {
        return {
          rowspan: 1,
          colspan: 1,
          content: column.label
        }
      } else if ($index === 4) {
        return {
          rowspan: 2,
          colspan: 1,
          content: column.label
        }
      }
    }
  }
}
</script>