如何在el-table中实现合计行多行显示并自定义内容布局？

Question

如何在Element Plus的`el-table`中实现合计行多行显示并自定义内容布局？ 在实际项目中，我们常常需要在表格底部展示合计信息，并且可能包含多行复杂的统计数据。默认情况下，`el-table`的`summary-method`只能生成单行合计内容，无法直接支持多行显示。要实现多行合计并自定义布局，可以通过以下方式解决： 1. 使用`footer-method`替代`summary-method`，手动返回多行结构的数据。 2. 在`table-footer`插槽中完全自定义合计行的内容和样式，通过嵌套`

`或``实现复杂布局。 3. 调整列宽和对齐方式以匹配表格主体部分。 此方法适用于需要展示多维度统计信息的场景，例如金额总计、数量汇总等。如何优雅地实现这一功能？

Answer 1

1. 问题分析

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

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

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

2. 解决方案设计

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

2.1 使用footer-method

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

<template>
    <el-table
        :data="tableData"
        :summary-method="getSummary"
        show-summary>
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="amount1" label="金额1" />
        <el-table-column prop="amount2" label="金额2" />
    </el-table>
</template>

<script>
export default {
    data() {
        return {
            tableData: [
                { name: '项目A', amount1: 100, amount2: 200 },
                { name: '项目B', amount1: 150, amount2: 250 }
            ]
        };
    },
    methods: {
        getSummary(param) {
            const { columns } = param;
            const sums = [];
            sums.push('总计'); // 第一列显示“总计”
            sums.push(columns.reduce((sum, column, index) => {
                if (index > 0 && index < columns.length - 1) {
                    const values = this.tableData.map(item => Number(item[column.property]));
                    return sum + values.reduce((prev, curr) => prev + (curr || 0), 0);
                }
                return sum;
            }, 0));
            return [sums, ['次总计', 300, 400]]; // 返回多行数据
        }
    }
};
</script>

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

2.2 使用table-footer插槽

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

<template>
    <el-table :data="tableData">
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="amount1" label="金额1" />
        <el-table-column prop="amount2" label="金额2" />
        <template #footer>
            <tr>
                <td colspan="3">
                    <div style="display: flex; justify-content: space-between;">
                        <div>总计：</div>
                        <div>{{ totalAmount1 }}</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <div style="display: flex; justify-content: space-between;">
                        <div>次总计：</div>
                        <div>{{ totalAmount2 }}</div>
                    </div>
                </td>
            </tr>
        </template>
    </el-table>
</template>

<script>
export default {
    data() {
        return {
            tableData: [
                { name: '项目A', amount1: 100, amount2: 200 },
                { name: '项目B', amount1: 150, amount2: 250 }
            ]
        };
    },
    computed: {
        totalAmount1() {
            return this.tableData.reduce((sum, item) => sum + item.amount1, 0);
        },
        totalAmount2() {
            return this.tableData.reduce((sum, item) => sum + item.amount2, 0);
        }
    }
};
</script>

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

3. 实现细节与注意事项

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

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

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

<style scoped>
td, th {
    text-align: center;
}
.custom-footer {
    background-color: #f0f0f0;
}
</style>

4. 流程图说明

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

```mermaid
sequenceDiagram
    participant Developer
    participant ElementPlus
    Developer->>ElementPlus: 配置el-table组件
    ElementPlus->>Developer: 调用footer-method或table-footer插槽
    Developer->>ElementPlus: 返回多行数据或自定义HTML结构
    ElementPlus->>Developer: 渲染合计行
```