el-table合计行

### 如何在 Element UI 的 `el-table` 中添加合计行 为了实现在 `el-table` 组件中展示合计行，可以通过设置属性 `show-summary=true` 并定义自定义汇总计算逻辑来达成这一目标[^3]。 下面是一个具体的实例代码片段： ```html <template> <div> <!-- 定义表格 --> <el-table :data="tableData" border show-summary :summary-method="getSummaries" style="width: 100%"> <el-table-column prop="name" label="商品名称"></el-table-column> <el-table-column prop="price" label="单价(元)" align="right"> <template slot-scope="scope">{{ scope.row.price }}</template> </el-table-column> <el-table-column prop="quantity" label="数量" align="right"> <template slot-scope="scope">{{ scope.row.quantity }}</template> </el-table-column> <el-table-column prop="totalPrice" label="总价(元)" align="right"> <template slot-scope="scope">{{ scope.row.totalPrice }}</template> </el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { name: '苹果', price: 5, quantity: 10, totalPrice: 5 * 10 }, { name: '香蕉', price: 3, quantity: 20, totalPrice: 3 * 20 } ] }; }, 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); // 对于价格字段保留两位小数 if(column.label.includes('价')){ sums[index]=sums[index].toFixed(2); } } else { sums[index] = ''; } }); return sums; } } }; </script> ``` 此段代码展示了如何创建一个带有合计行的简单购物清单表单。通过配置 `el-table` 的 `show-summary` 属性以及指定 `summary-method=getSummaries` 方法来自定义求和方式。对于每一列的数据总和进行了处理，并特别针对金额类别的数据做了四舍五入到小数点后第二位的操作。