vxe-table 实现行分组增加对子集的数据统计

vxe-table 实现行分组增加对子集的数据统计
查看官网：https://vxetable.cn
gitbub：https://github.com/x-extends/vxe-table
gitee：https://gitee.com/x-extends/vxe-table
显示分组统计

通过 rowGroupConfig.showTotal 来开启分组统计，显示子集数量

1. <template>
2.   
3.     <vxe-table
4.       show-overflow
5.       height="500"
6.       :row-group-config="rowGroupConfig"
7.       :data="tableData">
8.       <vxe-column field="name" title="Name" min-width="300" row-group-node></vxe-column>
9.       <vxe-column field="role" title="Role"></vxe-column>
10.       <vxe-column field="sex" title="Sex"></vxe-column>
11.       <vxe-column field="age" title="Age"></vxe-column>
12.       <vxe-column field="address" title="Address"></vxe-column>
13.     </vxe-table>
14.   
15. </template>

复制代码

自定义分组统计

通过 rowGroupConfig.totalMethod 方法来自定义统计逻辑，返回字符

1. <template>
2.   
3.     <vxe-table
4.       show-overflow
5.       height="500"
6.       :row-group-config="rowGroupConfig"
7.       :data="tableData">
8.       <vxe-column field="name" title="Name" min-width="300" row-group-node></vxe-column>
9.       <vxe-column field="role" title="Role"></vxe-column>
10.       <vxe-column field="sex" title="Sex"></vxe-column>
11.       <vxe-column field="age" title="Age"></vxe-column>
12.       <vxe-column field="address" title="Address"></vxe-column>
13.     </vxe-table>
14.   
15. </template>

复制代码

https://gitee.com/x-extends/vxe-table

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！