vxe-table 如何给分组表头下方的每一列增加一个筛选框
通过 floating-filter-config.enabled 来启用浮动筛选,再对指定列设置 floating-filters 来开启筛选渲染
https://vxetable.cn
<template><div>显示图标按钮：<vxe-switchv-model="filterConfig.showIcon"></vxe-switch><vxe-gridv-bind="gridOptions"></vxe-grid></div></template><scriptsetup>import{reactive}from'vue'constsexFilterRender=reactive({name:'VxeSelect',props:{clearable:true},options:[{label:'Man',value:'Man'},{label:'Woman',value:'Woman'}]})constfilterConfig=reactive({showIcon:true})constgridOptions=reactive({border:true,height:400,filterConfig,floatingFilterConfig:{enabled:true},columns:[{field:'name',title:'Name',filterRender:{name:'VxeInput',props:{clearable:true}}},{title:'分组1',children:[{field:'sex',title:'Sex',filterRender:sexFilterRender}]},{title:'分组2',children:[{field:'age',title:'Age',filterRender:{name:'VxeNumberInput',props:{clearable:true}}},{field:'date',title:'Date',filterRender:{name:'VxeDatePicker',props:{clearable:true}}}]}],data:[{id:10001,name:'Test1',role:'Develop',sex:'Woman',age:28,date:'2025-10-01'},{id:10002,name:'Test2',role:'Test',sex:'Man',age:22,date:'2025-10-02'},{id:10003,name:'Test3',role:'PM',sex:'Woman',age:32,date:'2025-10-05'},{id:10004,name:'Test4',role:'Designer',sex:'Man',age:54,date:'2025-10-14'},{id:10005,name:'Test5',role:'Develop',sex:'Man',age:44,date:'2025-09-01'},{id:10006,name:'Test6',role:'Develop',sex:'Woman',age:24,date:'2025-08-15'},{id:10007,name:'Test7',role:'Test',sex:'Man',age:52,date:'2025-11-12'},{id:10008,name:'Test8',role:'PM',sex:'Woman',age:34,date:'2025-11-27'},{id:10009,name:'Test9',role:'PM',sex:'Man',age:24,date:'2025-10-18'},{id:100010,name:'Test10',role:'Develop',sex:'Woman',age:24,date:'2025-10-25'}]})</script>https://gitee.com/x-extends/vxe-gantt
