做网站包含什么职位,优秀个人网站设计欣赏,对网站开发的理解,流量网站制作vue表格数据分组后如何同时实现筛选功能#xff0c;当对列表数据分组后#xff0c;需求还需要能支持筛选#xff0c;多每个分组的子项进行过滤#xff0c;可以用一下方式实现
https://vxeui.com templatedivvxe-grid v-bindgridOptions&g…vue表格数据分组后如何同时实现筛选功能当对列表数据分组后需求还需要能支持筛选多每个分组的子项进行过滤可以用一下方式实现https://vxeui.comtemplatedivvxe-gridv-bindgridOptions/vxe-grid/div/templatescriptsetupimport{reactive}fromvueconstgridOptionsreactive({height:500,aggregateConfig:{groupFields:[role]},columns:[{field:name,title:Name,minWidth:300,rowGroupNode:true,filters:[{label:Test1,value:Test1},{label:Test2,value:Test2},{label:Test3,value:Test3},{label:Test4,value:Test4},{label:Test5,value:Test5},{label:Test6,value:Test6},{label:Test7,value:Test7},{label:Test8,value:Test8},{label:Test9,value:Test9},{label:Test10,value:Test10},{label:Test11,value:Test11},{label:Test12,value:Test12},{label:Test13,value:Test13},{label:Test14,value:Test14},{label:Test15,value:Test15},{label:Test16,value:Test16},{label:Test17,value:Test17},{label:Test18,value:Test18},{label:Test19,value:Test19},{label:Test20,value:Test20}]},{field:role,title:Role,filters:[{label:Develop,value:Develop},{label:PM,value:PM},{label:Test,value:Test},{label:Designer,value:Designer}]},{field:sex,title:Sex,filters:[{label:Man,value:Man},{label:Woman,value:Woman}]},{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
