vxe-table 实现数据分组统计与表尾合计
在数据报表或管理体系中，常常须要按某个字段对数据举行分组，并盘算每组的统计值（如求和、均匀值），同时在表格底部体现全部数据的合计。vxe-table 提供了机动的聚合设置 aggregateConfig 和自界说盘算函数 calcValuesMethod，共同手动表尾 footerData，可以轻松实现这类需求。本文将通过一个完备的示例，演示怎样按脚色（role）对数据举行分组，统计每个脚色的 num 字段总和，并在表格尾部体现全部数据的 num 总计。
属性阐明
设置项 / 属性所在位置作用aggregateConfig.groupFields表格设置（gridOptions）指定分组字段，比方 ['role']，表格会按该字段对数据举行分组，并在每个分组后插入“分组合计行”aggregateConfig.calcValuesMethod表格设置自界说分组统计值盘算函数，吸取当前分组的子数据（children）和列信息（column），返回统计值aggFunc列设置（columns）标记该列须要加入聚合盘算，共同分组统计使用footerData表格设置手动指定表尾合计行的数据，实用于简单的总计、均匀值等，更复杂时可共同 updateFooter 方法动态盘算rowGroupNode列设置标识该列作为分组的体现节点，通常设置为 true，使分组后的行可以睁开/折叠（示例中使用）分组聚合须要同时设置 aggregateConfig.groupFields 和至少一列的 rowGroupNode: true，同时要聚合的列必须设置 aggFunc: true（或自界说聚合函数）。
代码
https://img2024.cnblogs.com/blog/3766032/202606/3766032-20260601163929994-673929562.png
<template>
<vxe-grid v-bind="gridOptions"></vxe-grid>
</template>实现思绪
[*]分组体现：表格会按 role 字段将数据分组，同一脚色的数据连续分列，并在每个分组前体现一个可睁开/折叠的分组行（分组标题行）。
[*]分组统计行：在每个分组的末了，自动插入一行“分组合计”，此中 num 列体现该组内全部 num 值的总和（由 * calcValuesMethod 自界说盘算）。
表尾总计：表格底部固定一行（footerData），体现全部数据的 num 总计。该总计须要手动从数据源盘算并赋值。
vxe-table 通过 aggregateConfig 和 aggFunc 提供了强大的分组聚合本事，联合自界说盘算函数 calcValuesMethod 可以满足恣意复杂的统计需求。而表尾合计通过 footerData 手动维护，机动直观。两者共同使用，可以大概快速搭建具有分组统计和总计功能的专业数据表格。
https://vxetable.cn
免责声明：如果侵犯了您的权益，请联系站长及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金.
页:
[1]