1、vxe-table
vxe-table的表尾合计，需要show-footer和footer-method搭配使用。
<vxe-table:data="tableData"ref="vxeRef"border resizable :footer-method="footerMethod":show-footer="true" >
</vxe-table>
const moneyFilter = (value: any) => {if (!value) return '0.00';value = value - 0;return `$ ${value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')}`;
};// 进行合计
const sumNumNew = (costForm: any, type: any) => {let total = 0;for (let i = 0; i < costForm.length; i++) {total += Number(costForm[i][type]);}return moneyFilter(total);
};const footerMethod = ({ columns, data }: any) => {const footerData = [columns.map((column: any, _columnIndex: any) => {if (_columnIndex === 0) {return '合计';}// 传入需要计算合计的列if (['test1'].includes(column.field)) {return sumNumNew(data, 'test1');}if (['test2'].includes(column.field)) {return sumNumNew(data, 'test2');}return null;}),];return footerData;
};
手动更新表尾（对于某些需要频繁更新的场景下可能会用到）：
vxeRef.value.updateFooter();
2、element
若表格展示的是各类数字，可以在表尾显示各列的合计。
<el-table:data="tableData"borderheight="200":summary-method="getSummaries"show-summary></el-table>
//自定义统计
const getSummaries = (param: any) => {const { columns, data } = paramconst sums: string[] = []columns.forEach((column, index) => {if (index === 0) {sums[index] = '合计'return}const values = data.map((item) => Number(item[column.property]))if (!values.every((value) => Number.isNaN(value))) {sums[index] = `$ ${values.reduce((prev, curr) => {const value = Number(curr)if (!Number.isNaN(value)) {return prev + curr} else {return prev}}, 0)}`} else {sums[index] = 'N/A'}})return sums
}
将 show-summary 设置为true就会在表格尾部展示合计行。 默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过sum-text配置），其余列会将本列所有数值进行求合操作，并显示出来。 当然，你也可以定义自己的合计逻辑。 使用 summary-method 并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中， 具体可以参考本例中的第二个表格。
