当前位置：首页 > news >正文

vue 表格 vxe-table 如何实现透视表拖拽对数据进行分组汇总，金额合计、平均值等

news 2026/5/12 11:47:53

vue 表格 vxe-table 如何实现透视表拖拽对数据进行分组汇总，金额合计、平均值等,通过 custom-config.allowGroup 启用分组拖拽功能

https://vxetable.cn

拖拽列进行数据分组后自动汇总

通过拖拽列到聚合列表，自动对数据进行合计汇总。设置 custom-config.allowGroup 和 custom-config.allowValues 启用拖拽功能

<template><div><vxe-gridv-bind="gridOptions"></vxe-grid></div></template><scriptsetup>import{reactive}from'vue'constgridOptions=reactive({height:600,border:true,showOverflow:true,aggregateConfig:{},columnConfig:{resizable:true},customConfig:{allowGroup:true,allowValues:true},toolbarConfig:{custom:true},columns:[{type:'seq',width:70},{field:'department',title:'部门',minWidth:200,rowGroupNode:true},{field:'name',title:'产品名称',width:140},{field:'date',title:'日期',width:140},{field:'actualAmount',title:'实际销售',width:140},{field:'plannedAmount',title:'计划销售',width:140}],data:[{id:10001,name:'笔记本',department:'销售1部',actualAmount:80,plannedAmount:100,date:'2025-02-01'},{id:10002,name:'手机',department:'销售3部',actualAmount:140,plannedAmount:120,date:'2025-01-01'},{id:10003,name:'键盘',department:'销售2部',actualAmount:220,plannedAmount:200,date:'2025-05-01'},{id:10004,name:'鼠标',department:'销售1部',actualAmount:110,plannedAmount:140,date:'2025-01-01'},{id:10005,name:'笔记本',department:'销售2部',actualAmount:40,plannedAmount:90,date:'2025-01-01'},{id:10006,name:'鼠标',department:'销售4部',actualAmount:40,plannedAmount:120,date:'2025-03-01'},{id:10007,name:'键盘',department:'销售1部',actualAmount:234,plannedAmount:300,date:'2025-05-01'},{id:10008,name:'手机',department:'销售4部',actualAmount:146,plannedAmount:240,date:'2025-11-01'},{id:10009,name:'笔记本',department:'销售3部',actualAmount:78,plannedAmount:120,date:'2025-05-01'},{id:10010,name:'笔记本',department:'销售4部',actualAmount:100,plannedAmount:130,date:'2025-03-01'},{id:10011,name:'手机',department:'销售2部',actualAmount:146,plannedAmount:150,date:'2025-03-01'},{id:10012,name:'键盘',department:'销售4部',actualAmount:130,plannedAmount:130,date:'2025-10-01'},{id:10013,name:'手机',department:'销售2部',actualAmount:140,plannedAmount:80,date:'2025-02-01'},{id:10014,name:'笔记本',department:'销售1部',actualAmount:200,plannedAmount:100,date:'2025-08-01'},{id:10015,name:'键盘',department:'销售3部',actualAmount:320,plannedAmount:300,date:'2025-05-01'},{id:10016,name:'笔记本',department:'销售4部',actualAmount:380,plannedAmount:400,date:'2025-10-01'},{id:10017,name:'鼠标',department:'销售1部',actualAmount:34,plannedAmount:200,date:'2025-12-01'},{id:10018,name:'键盘',department:'销售4部',actualAmount:100,plannedAmount:150,date:'2025-10-01'},{id:10019,name:'鼠标',department:'销售3部',actualAmount:90,plannedAmount:120,date:'2025-02-01'},{id:10020,name:'手机',department:'销售2部',actualAmount:40,plannedAmount:50,date:'2025-03-01'}]})</script>

同时支持对分组后的数据进行排序

对数据进行汇总后，支持对汇总及子项进行排序

<template><div><vxe-gridv-bind="gridOptions"></vxe-grid></div></template><scriptsetup>import{reactive}from'vue'constgridOptions=reactive({height:600,showOverflow:true,aggregateConfig:{groupFields:['department'],mode:'default'// 通过 rowGroupNode 指定字段来展示层级关系},columnConfig:{resizable:true},customConfig:{allowGroup:true,// 允许自定义聚合分组配置allowValues:true// 允许自定义聚合函数配置},toolbarConfig:{custom:true},columns:[{type:'seq',width:70},{field:'department',title:'部门',minWidth:200,rowGroupNode:true},{field:'name',title:'产品名称',width:140},{field:'date',title:'日期',width:140},{field:'actualAmount',title:'实际销售',width:140,aggFunc:'sum',sortable:true},{field:'plannedAmount',title:'计划销售',width:140,aggFunc:'sum',sortable:true}],data:[{id:10001,name:'笔记本',department:'销售1部',actualAmount:80,plannedAmount:100,date:'2025-02-01'},{id:10002,name:'手机',department:'销售3部',actualAmount:140,plannedAmount:120,date:'2025-01-01'},{id:10003,name:'键盘',department:'销售2部',actualAmount:220,plannedAmount:200,date:'2025-05-01'},{id:10004,name:'鼠标',department:'销售1部',actualAmount:110,plannedAmount:140,date:'2025-01-01'},{id:10005,name:'笔记本',department:'销售2部',actualAmount:40,plannedAmount:90,date:'2025-01-01'},{id:10006,name:'鼠标',department:'销售4部',actualAmount:40,plannedAmount:120,date:'2025-03-01'},{id:10007,name:'键盘',department:'销售1部',actualAmount:234,plannedAmount:300,date:'2025-05-01'},{id:10008,name:'手机',department:'销售4部',actualAmount:146,plannedAmount:240,date:'2025-11-01'},{id:10009,name:'笔记本',department:'销售3部',actualAmount:78,plannedAmount:120,date:'2025-05-01'},{id:10010,name:'笔记本',department:'销售4部',actualAmount:100,plannedAmount:130,date:'2025-03-01'},{id:10011,name:'手机',department:'销售2部',actualAmount:146,plannedAmount:150,date:'2025-03-01'},{id:10012,name:'键盘',department:'销售4部',actualAmount:130,plannedAmount:130,date:'2025-10-01'},{id:10013,name:'手机',department:'销售2部',actualAmount:140,plannedAmount:80,date:'2025-02-01'},{id:10014,name:'笔记本',department:'销售1部',actualAmount:200,plannedAmount:100,date:'2025-08-01'},{id:10015,name:'键盘',department:'销售3部',actualAmount:320,plannedAmount:300,date:'2025-05-01'},{id:10016,name:'笔记本',department:'销售4部',actualAmount:380,plannedAmount:400,date:'2025-10-01'},{id:10017,name:'鼠标',department:'销售1部',actualAmount:34,plannedAmount:200,date:'2025-12-01'},{id:10018,name:'键盘',department:'销售4部',actualAmount:100,plannedAmount:150,date:'2025-10-01'},{id:10019,name:'鼠标',department:'销售3部',actualAmount:90,plannedAmount:120,date:'2025-02-01'},{id:10020,name:'手机',department:'销售2部',actualAmount:40,plannedAmount:50,date:'2025-03-01'}]})</script>