vue antd table 增加底部合计行统计样式

### 实现 Vue Ant Design 表格组件中的带样式底部合计行 在 Vue 中使用 Ant Design 的 `Table` 组件时，可以通过自定义 `footer` 属性来实现带有样式的底部合计行。以下是具体的方法和代码示例： #### 自定义 Footer 方法 通过 `footer` 属性可以传入一个函数，在该函数中返回合计行的内容并应用样式[^2]。 ```vue <template> <a-table :columns="columns" :data-source="dataSource" :scroll="{ y: 240 }" bordered> <template #footer> <tr style="background-color: #f0f8ff; font-weight: bold;"> <td colspan="2">总计</td> <td>{{ totalAmount }}</td> </tr> </template> </a-table> </template> <script> export default { data() { return { columns: [ { title: '名称', dataIndex: 'name', key: 'name' }, { title: '数量', dataIndex: 'quantity', key: 'quantity' }, { title: '金额', dataIndex: 'amount', key: 'amount' } ], dataSource: [ { key: '1', name: '商品A', quantity: 10, amount: 100 }, { key: '2', name: '商品B', quantity: 20, amount: 200 }, { key: '3', name: '商品C', quantity: 30, amount: 300 } ] }; }, computed: { totalAmount() { return this.dataSource.reduce((sum, item) => sum + item.amount, 0); } } }; </script> <style scoped> /* 定义合计行的样式 */ tr td { text-align: center; } </style> ``` #### 关键点说明 1. **Footer 样式** 在模板中直接为 `<tr>` 或 `<td>` 设置内联样式，或者通过 CSS 类名统一管理样式。 2. **统计数据计算** 使用 Vue 的 `computed` 属性动态计算合计值，并将其绑定到视图上。 3. **跨列显示** 利用 HTML 的 `colspan` 属性让某些单元格跨越多个列，从而提升展示效果。 --- ### 动态调整表格样式 如果需要进一步增强样式控制（如背景色、字体大小），可以在全局或局部引入额外的 CSS 文件[^1]。 ```css /* 全局样式 */ .custom-footer-row { background-color: #e6ffe6 !important; color: #333 !important; font-size: 14px !important; } .custom-footer-cell { border-top: 2px solid #ccc !important; padding: 8px !important; } ``` 更新 Vue 模板部分如下： ```vue <tr class="custom-footer-row"> <td class="custom-footer-cell" colspan="2">总计</td> <td class="custom-footer-cell">{{ totalAmount }}</td> </tr> ``` --- ### 处理复杂场景下的多表头或多合计行 对于更复杂的场景（如多级表头或多张表共享同一 Sheet），需结合 Excel 导出工具库（如 `xlsx` 或 `file-saver`）完成高级定制。 ```javascript import XLSX from 'xlsx'; import FileSaver from 'file-saver'; function exportToExcel(data) { const worksheet = XLSX.utils.json_to_sheet(data); const workbook = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' }); saveAsExcelFile(excelBuffer, '报表.xlsx'); } function saveAsExcelFile(buffer, fileName) { const data = new Blob([buffer], { type: 'application/octet-stream' }); FileSaver.saveAs(data, fileName); } ``` 调用上述方法即可实现出口功能，同时支持动态设置列宽和其他样式属性。 ---