elementui表格横轴合计

### 实现 ElementUI 表格中的行合计功能 为了实现在 Element UI 的表格中添加行合计的功能，可以利用 `summary-method` 属性来自定义合计逻辑。通过该属性指定的方法接收四个参数：`param.columns`, `param.data`, `param.dataIndex` 和 `param.columnIndex`。此方法返回一个数组，表示每一列的合计值。 对于特定需求，在某些单元格内不仅展示数值还希望加入额外 HTML 元素如提示框或按钮的情况，可以在遍历列的过程中动态构建 DOM 结构并将其作为相应位置的内容返回[^1]。 下面是一个具体的例子来说明如何实现这一点： ```javascript methods: { getSummaries(param) { const { columns, data } = param; const sums = []; columns.forEach((column, index) => { if (index === 0) { sums[index] = '总计'; return; } // 对于需要特殊处理的字段名做判断 if (['num', 'refundStuNum'].includes(column.property)) { const values = data.map(item => Number(item[column.property])); if (!values.every(value => isNaN(value))) { sums[index] = ( <div> <span>{values.reduce((prev, curr) => prev + curr, 0)}</span> {/* 添加工具提示 */} <el-tooltip class="item" effect="light" content="这里是提示文字" placement="top"> <i class="el-icon-warning-outline" style={{ marginLeft: '5px' }}></i> </el-tooltip> </div> ); } else { sums[index] = '-'; } } else { sums[index] = ''; } }); return sums; }, } ``` 上述代码片段展示了当遇到名为 `'num'` 或者 `'refundStuNum'` 的列时，会计算这些列下所有记录对应项之和，并且为它们附加了一个带有图标的悬浮提示组件。 此外，如果想要在最后一列放置操作按钮，则可以通过 JavaScript 动态修改页面上的元素结构完成这一目标[^2]；不过更推荐的做法是在模板里直接编写静态布局配合条件渲染指令控制其可见性，这样可以使代码更加清晰易读。 最后需要注意的是，由于 Vue 更新视图存在异步机制，因此可能需要调用 `$nextTick()` 来确保 DOM 已经更新完毕再执行后续操作，比如调整样式或者绑定事件监听器等[^3]。