el-table 合计行多行

### 实现 Element UI `el-table` 的多行合计功能 在 Element UI 中，可以利用 `summary-method` 和 `show-summary` 属性来实现表格的多行合计功能。通过自定义 `summary-method` 方法，可以根据需求计算并展示合计数据。 以下是具体的实现方式： #### 自定义合计逻辑 当启用 `show-summary` 属性时，`el-table` 会调用 `summary-method` 提供的方法来自动生成合计行的数据。此方法接收一个参数数组，其中包含了当前页的所有行数据以及列配置信息。 ```javascript 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; // 返回最终的合计数据 } } ``` 上述代码实现了动态计算每列数值型字段的总和，并将其作为合计行的内容返回[^1]。 #### 表格组件示例 下面是一个完整的 Vue.js 示例，展示了如何使用 `summary-method` 来实现多行合计功能。 ```vue <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="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> <script> export default { data() { return { tableData: [ { name: '张三', amount1: 100, amount2: 200, amount3: 300 }, { name: '李四', amount1: 400, amount2: 500, amount3: 600 }, { name: '王五', amount1: 700, amount2: 800, amount3: 900 } ] }; }, 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> ``` 在此示例中，我们创建了一个简单的表格，包含三个金额列 (`amount1`, `amount2`, `amount3`) 并启用了合计行的功能。通过 `getSummaries` 函数，我们可以灵活地控制哪些列参与总计运算[^2]。 --- ###