el-table 多行合计

### 实现 Element UI `el-table` 组件中的多行合计功能 为了在 `el-table` 中实现多行合计功能，可以利用表格的 `summary-method` 属性自定义计算汇总数据的方法，并通过设置 `show-summary` 属性来显示总计行。下面是一个具体的实例说明如何操作。 #### 自定义合计方法并展示合计行 当需要对特定列的数据求和或其他形式统计时，可以通过编写 JavaScript 函数处理这些逻辑，在此函数内部访问原始数据源并对目标字段执行相应运算[^1]： ```html <template> <div class="app-container"> <el-table :data="tableData" style="width: 100%" show-summary :summary-method="getSummaries"> <!-- 定义表头 --> <el-table-column prop="name" label="商品名称"></el-table-column> <el-table-column prop="price" label="单价(元)" align="right"></el-table-column> <el-table-column prop="quantity" label="数量" align="right"></el-table-column> <el-table-column prop="totalPrice" label="总价(元)" align="right"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { name: '苹果', price: 5, quantity: 2 }, { name: '香蕉', price: 3, quantity: 4 } ] }; }, 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).toFixed(2)} 元`; } else { sums[index] = ''; } }); return sums; } } }; </script> ``` 上述代码片段展示了怎样创建一个简单的购物清单应用，其中包含了商品名、单价、购买数量以及每项的小计金额四列表格；并通过 `getSummaries()` 方法实现了最后一行列出各项数值之和的效果。 #### 注意事项 对于某些特殊场景下的需求调整，比如只针对部分列做累加或者采用不同的聚合方式（平均数、最大最小值等），则可以在 `getSummaries` 内部进一步修改对应的业务逻辑以满足实际应用场景的要求。