1. 问题分析

在Element Plus的el-table组件中，默认的summary-method方法只能生成单行合计内容，无法满足多行复杂统计数据的需求。为了实现多行合计并自定义布局，需要深入理解el-table的扩展机制和插槽功能。

技术难点：如何突破单行限制，实现多行数据展示？核心需求：通过自定义方式调整合计行的内容、样式和布局。

解决此问题的关键在于使用footer-method或table-footer插槽，结合Vue的模板语法动态生成多行结构。

2. 解决方案设计

以下是两种主要解决方案的详细步骤：

2.1 使用footer-method

footer-method允许我们手动返回多行结构的数据。具体实现如下：

上述代码通过getSummary方法返回多行数组，每一行代表一行合计数据。

2.2 使用table-footer插槽

如果需要更灵活的布局，可以使用table-footer插槽完全自定义合计行内容：

通过#footer插槽，我们可以嵌套任意HTML结构，实现复杂的多行布局。

3. 实现细节与注意事项

在实际开发中，还需要注意以下几点：

列宽匹配：确保合计行的列宽与表格主体部分一致，避免视觉错位。对齐方式：根据业务需求设置文本对齐方式（如右对齐数字）。样式统一：合计行的字体、颜色等应与表格整体风格保持一致。

以下是列宽匹配的示例代码：

4. 流程图说明

以下是实现多行合计行的流程图：

```mermaid

sequenceDiagram

participant Developer

participant ElementPlus

Developer->>ElementPlus: 配置el-table组件

ElementPlus->>Developer: 调用footer-method或table-footer插槽

Developer->>ElementPlus: 返回多行数据或自定义HTML结构

ElementPlus->>Developer: 渲染合计行

```