el-table 底部小计合计加一行
时间: 2025-03-26 07:19:49 浏览: 29
### 实现 Element-UI `el-table` 组件中的底部小计合计行
为了在 `el-table` 中添加一行用于显示底部的小计和合计,可以利用 `summary-method` 属性来自定义汇总方法,并通过设置 `show-summary="true"` 来启用此功能。
具体来说,在 Vue.js 的模板部分,对于 `el-table` 组件应加入如下属性:
```html
<template>
<div>
<el-table :data="tableData" show-summary :summary-method="getSummaries">
<!-- 列定义 -->
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="amount1" label="金额1"></el-table-column>
<el-table-column prop="amount2" label="金额2"></el-table-column>
<el-table-column prop="amount3" label="金额3"></el-table-column>
</el-table>
</div>
</template>
```
接着,在 JavaScript 部分编写计算总和的方法 `getSummaries`:
```javascript
<script>
export default {
data() {
return {
tableData: [
{ name: '项目A', amount1: 10, amount2: 20, amount3: 30 },
{ name: '项目B', amount1: 40, amount2: 50, amount3: 60 }
]
};
},
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);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index] += ' 元'; // 可选:根据实际情况调整单位
} else {
sums[index] = '';
}
});
return sums;
}
}
}
</script>
```
上述代码实现了对指定列数据求和并展示于表底的合计行中。每一列的数据会被遍历相加,最后形成一个新的数组作为返回值传递给表格组件来渲染成合计行[^1]。
阅读全文
相关推荐

















