elementui合计
使用 ElementUI 实现表格合计功能
ElementUI 的表格组件（el-table）支持通过 show-summary 属性显示合计行，并通过 summary-method 自定义合计逻辑。以下是具体实现方法：
启用合计行
在 el-table 上添加 show-summary 属性，设置为 true 即可显示默认合计行：
<el-table :data="tableData" show-summary>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="amount" label="金额"></el-table-column>
</el-table>自定义合计逻辑
通过 summary-method 绑定一个方法，实现自定义合计计算。该方法接收表格数据参数，需返回一个数组，数组元素对应每一列的合计值：
<el-table
:data="tableData"
show-summary
:summary-method="getSummaries">
<!-- 列定义 -->
</el-table>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]));
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
return isNaN(value) ? prev : prev + value;
}, 0);
} else {
sums[index] = 'N/A';
}
});
return sums;
}
}关键参数说明
show-summary：控制是否显示合计行。summary-method：自定义合计计算方法，需返回数组格式的结果。- 合计行样式可通过 CSS 类名
.el-table__footer自定义。
示例：多列合计与格式化
若需对金额列添加单位或格式化，可在合计方法中处理：
sums[index] = '¥' + sums[index].toFixed(2); // 金额列显示为货币格式通过上述方法，可以灵活实现 ElementUI 表格的合计功能，支持动态数据与自定义计算逻辑。
