qq业务代理网站建设,备案的域名做电影网站吗,后台管理网站模板下载,网页加速器有哪些vxe-table 按多个列进行分组和按多个字段进行分组的使用方式
查看官网#xff1a;https://vxetable.cn gitbub#xff1a;https://github.com/x-extends/vxe-table gitee#xff1a;https://gitee.com/x-extends/vxe-table
合并多个字段进行分组
将多个字段的汇集到指定字…vxe-table 按多个列进行分组和按多个字段进行分组的使用方式查看官网https://vxetable.cngitbubhttps://github.com/x-extends/vxe-tablegiteehttps://gitee.com/x-extends/vxe-table合并多个字段进行分组将多个字段的汇集到指定字段再按照指定字段进行分组即可轻松实现对多个字段分组实现后跟单列分组效果一样区别是只在一层显示分组内容templatedivvxe-gridv-bindgridOptions/vxe-grid/div/templatescriptsetupimport{reactive}fromvueconstgridOptionsreactive({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.datatableData/script按多字个列进行分组使用非常简单配置一下就可以启用通过配置 aggregate-config.groupFields 指定按多个字段分组会对自动对多个列进行分组并多列按树结构进行渲染templatedivvxe-gridv-bindgridOptions/vxe-grid/div/templatescriptsetupimport{reactive}fromvueconstgridOptionsreactive({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}]})/scripthttps://gitee.com/x-extends/vxe-table