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

vxe-table 如何给分组表头下方的每一列增加一个筛选框

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

http://www.cnnetsun.cn/news/181267.html

相关文章:

  • Interactive Brokers全新改版IBKR GlobalTrader应用,移动交易体验更简洁、更智能
  • 建筑装饰企业如何运用数字化工具提升管理效能?
  • 为什么顶尖文创团队都在用Open-AutoGLM?真相令人震惊
  • Java 岗 798 道真题解析,定级阿里 P7
  • 【程序员转型】90 天掌握网络安全黑客技能:从开发经验到内网渗透 / 漏洞分析的转型路径与实操技巧
  • 分布式计算框架的故障诊断与修复
  • 揭秘Open-AutoGLM技术架构:如何实现跨社区自动化服务闭环
  • AI辅助创作的终极武器:Open-AutoGLM部署与定制化实战
  • 面对AI时代潮流,测试人应该如何应对?
  • 从“流量变现”到“关系资产变现”:AI智能体如何重估私域的价值本源|创客匠人
  • 【Open-AutoGLM极地科考适配优化】:揭秘高寒极端环境下大模型稳定运行的5大核心技术
  • 【好写作AI】内容过于AI?好写作支持人性化润色与调校,赋予论文真实的“研究者之声”
  • 计算机毕业设计springboot家庭财务管理系统 基于 Spring Boot 的家庭财务智能管理系统设计与实现 Spring Boot 架构下的家庭财务信息化管理系统开发
  • 344.【结构化开发方法】系统分析
  • Open-AutoGLM模型调优技巧(性能提升80%的3个关键步骤)
  • 为什么瑞芯微(Rockchip)官方未提供FreeRTOS类os SDK支持
  • 网络安全核心基础百问百答:你的第一本实用安全速查手册
  • 揭秘Open-AutoGLM如何拯救非遗文化:5大核心技术首次公开
  • 揭秘Open-AutoGLM底层架构:如何实现高质量文创内容自动生成
  • 收藏!大模型学习实战指南:从入门到进阶,小白/程序员少走90%弯路
  • 收藏!2025年AI行业风口:应用层人才成企业争抢核心,程序员/小白入门指南
  • 你不知道的Open-AutoGLM黑科技(5个隐藏功能让城市管理效率提升300%)
  • 传奇手游快速挂机 巨 椰 云手机
  • AbMole小课堂:类器官培养中决定成败的抑制剂、细胞因子
  • Vue基础入门08,详解 Vue watch 侦听器:基础用法、深度监听与立即执行场景
  • 怎样选择品牌代工厂?不要只关注价格,这5点才是关键
  • 一键群控多台电脑,狂揽 2.2 万 GitHub Star!
  • Open-AutoGLM模型压缩技术揭秘:在边缘设备上实现毫秒级推理的6种方法
  • Open-AutoGLM部署避坑指南,20年架构师亲授高可用场景适配秘诀
  • 为什么说Open-AutoGLM是首个真正具备自主学习能力的开源框架?