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

vxe-table 按多个列进行分组和按多个字段进行分组的使用方式

news 2026/6/16 11:35:46

查看官网：https://vxetable.cn
gitbub：https://github.com/x-extends/vxe-table
gitee：https://gitee.com/x-extends/vxe-table

合并多个字段进行分组

将多个字段的汇集到指定字段，再按照指定字段进行分组即可轻松实现对多个字段分组；实现后跟单列分组效果一样，区别是只在一层显示分组内容

<template><div><vxe-gridv-bind="gridOptions"></vxe-grid></div></template><scriptsetup>import{reactive}from'vue'constgridOptions=reactive({height:500,aggregateConfig:{groupFields:['complexField']},columns:[{type:'seq',width:70},{field:'name',title:'Name',minWidth:300,rowGroupNode:true},{field:'role',title:'Role'},{field:'sex',title:'Sex'},{field:'age',title:'Age'},{field:'address',title:'Address'}],data:[]})consttableData=[{id:10001,name:'Test1',role:'Develop',sex:'Woman',age:28,date:'2025-02-01',address:'test abc'},{id:10002,name:'Test2',role:'Test',sex:'Man',age:22,date:'2025-01-01',address:'Guangzhou'},{id:10003,name:'Test3',role:'PM',sex:'Woman',age:32,date:'2025-02-01',address:'Shanghai'},{id:10004,name:'Test4',role:'Designer',sex:'Man',age:32,date:'2025-01-01',address:'test abc'},{id:10005,name:'Test5',role:'Develop',sex:'Man',age:30,date:'2025-01-01',address:'Shanghai'},{id:10006,name:'Test6',role:'Designer',sex:'Man',age:30,date:'2025-03-01',address:'test abc'},{id:10007,name:'Test7',role:'Test',sex:'Woman',age:29,date:'2025-01-01',address:'test abc'},{id:10008,name:'Test8',role:'PM',sex:'Woman',age:35,date:'2025-01-01',address:'test abc'},{id:10009,name:'Test9',role:'Test',sex:'Man',age:21,date:'2025-01-01',address:'test abc'},{id:10010,name:'Test10',role:'PM',sex:'Woman',age:28,date:'2025-03-01',address:'test abc'},{id:10011,name:'Test11',role:'Test',sex:'Woman',age:29,date:'2025-03-01',address:'test abc'},{id:10012,name:'Test12',role:'Develop',sex:'Man',age:37,date:'2025-10-01',address:'test abc'},{id:10013,name:'Test13',role:'Test',sex:'Woman',age:24,date:'2025-02-01',address:'test abc'},{id:10014,name:'Test14',role:'Develop',sex:'Man',age:34,date:'2025-02-01',address:'test abc'},{id:10015,name:'Test15',role:'Designer',sex:'Man',age:21,date:'2025-01-01',address:'test abc'},{id:10016,name:'Test16',role:'Designer',sex:'Woman',age:21,date:'2025-10-01',address:'test abc'},{id:10017,name:'Test17',role:'Test',sex:'Man',age:31,date:'2025-12-01',address:'test abc'},{id:10018,name:'Test18',role:'Develop',sex:'Woman',age:32,date:'2025-10-01',address:'test abc'},{id:10019,name:'Test19',role:'Test',sex:'Man',age:37,date:'2025-02-01',address:'test abc'},{id:10020,name:'Test20',role:'Develop',sex:'Man',age:41,date:'2025-03-01',address:'test abc'}]tableData.forEach(row=>{row.complexField=`${row.role}-${row.date}`})gridOptions.data=tableData</script>

按多字个列进行分组

使用非常简单，配置一下就可以启用，通过配置 aggregate-config.groupFields 指定按多个字段分组，会对自动对多个列进行分组，并多列按树结构进行渲染

<template><div><vxe-gridv-bind="gridOptions"></vxe-grid></div></template><scriptsetup>import{reactive}from'vue'constgridOptions=reactive({height:500,border:true,aggregateConfig:{groupFields:['role','date']},columns:[{type:'seq',width:70},{field:'name',title:'Name',minWidth:300,rowGroupNode:true},{field:'role',title:'Role'},{field:'sex',title:'Sex'},{field:'age',title:'Age'},{field:'address',title:'Address'}],data:[{id:10001,name:'Test1',role:'Develop',sex:'Woman',age:28,date:'2025-02-01',address:'test abc'},{id:10002,name:'Test2',role:'Test',sex:'Man',age:22,date:'2025-01-01',address:'Guangzhou'},{id:10003,name:'Test3',role:'PM',sex:'Woman',age:32,date:'2025-05-01',address:'Shanghai'},{id:10004,name:'Test4',role:'Designer',sex:'Man',age:32,date:'2025-01-01',address:'test abc'},{id:10005,name:'Test5',role:'Develop',sex:'Man',age:30,date:'2025-01-01',address:'Shanghai'},{id:10006,name:'Test6',role:'Designer',sex:'Man',age:30,date:'2025-03-01',address:'test abc'},{id:10007,name:'Test7',role:'Test',sex:'Woman',age:29,date:'2025-05-01',address:'test abc'},{id:10008,name:'Test8',role:'PM',sex:'Woman',age:35,date:'2025-11-01',address:'test abc'},{id:10009,name:'Test9',role:'Test',sex:'Man',age:21,date:'2025-05-01',address:'test abc'},{id:10010,name:'Test10',role:'PM',sex:'Woman',age:28,date:'2025-03-01',address:'test abc'},{id:10011,name:'Test11',role:'Test',sex:'Woman',age:29,date:'2025-03-01',address:'test abc'},{id:10012,name:'Test12',role:'Develop',sex:'Man',age:37,date:'2025-10-01',address:'test abc'},{id:10013,name:'Test13',role:'Test',sex:'Woman',age:24,date:'2025-02-01',address:'test abc'},{id:10014,name:'Test14',role:'Develop',sex:'Man',age:34,date:'2025-08-01',address:'test abc'},{id:10015,name:'Test15',role:'Designer',sex:'Man',age:21,date:'2025-05-01',address:'test abc'},{id:10016,name:'Test16',role:'Designer',sex:'Woman',age:21,date:'2025-10-01',address:'test abc'},{id:10017,name:'Test17',role:'Test',sex:'Man',age:31,date:'2025-12-01',address:'test abc'},{id:10018,name:'Test18',role:'Develop',sex:'Woman',age:32,date:'2025-10-01',address:'test abc'},{id:10019,name:'Test19',role:'Test',sex:'Man',age:37,date:'2025-02-01',address:'test abc'},{id:10020,name:'Test20',role:'Develop',sex:'Man',age:41,date:'2025-03-01',address:'test abc'}]})</script>