引言

表格作为一种常见的数据展示方式，在实际应用中需要提供灵活、高效、便捷的筛选功能来满足用户的需求。

Choerodon UI Table 提供全面的动态筛选条功能，适用于中后台企业系统的复杂查询需求。

设计目标

动态筛选条相比传统表单查询域具有更灵活的配置方式和更良好的用户体验。

筛选条支持纯前端使用，也可配置后端接口实现筛选项列表CRUD的个性化功能。 以下是详细的功能支持介绍：

功能支持

模糊搜索

聚合高频文本字段传参，用于支持模糊搜索场景，可配置修改模糊查询参数 key。

查询字段

基于 DS.queryFields 查询字段配置，生成查询字段表单

• 可配置 queryFieldsLimit控制默认显示的查询字段的数量，超出限制的查询字段放入添加筛选弹出窗口
• 存在值的查询字段直接展示，对应筛选弹窗内字段默认被勾选

前后缀渲染

前后预留渲染区域灵活支持业务需求

表格按钮

自定义表格控制按钮

筛选列表

配合后端接口，实现筛选状态存储。列表支持 CRUD，支持查询值 + 当前查询字段的保存和仅保存查询字段两种模式。

灵活应用

以上基本功能结合 API 可组合配置使表格筛选条适应不同系统的特定需求。

组件会根据是否配置接口、是否需要模糊筛选区等，应用不同的布局方式，设计交互更合理。

• fuzzyQuery：是否开启模糊查询 | 默认值：true
• fuzzyQueryOnly：是否仅使用模糊查询 | 默认值：false
• queryFieldsLimit：直接展示的查询字段的数量，超出限制的放入"添加筛选"弹窗 | 默认值：3
• ...

更多查看表格 DynamicFilterBar 相关 API：open.hand-china.com/choerodon-u…

配置组合场景

禁用模糊搜索 & 无接口：

开启模糊搜索 & 支持接口：

单独引用场景

动态筛选条支持单独引用使用，可根据界面查询需求，灵活布局。

界面布局

T 型布局

进阶使用

可配置相关属性开启高级筛选区。 高级筛选区适用于多表关联、多维度以及不同规则下的复杂查询场景。它通过提供灵活的字段配置条件，让您能够轻松实现复杂查询。

更多查看文档动态筛选条-高级筛选配置： juejin.cn/post/725384…

欢迎试用

以上就是 Choerodon UI Table 动态筛选条的基本介绍，如果您有更好的想法和建议，欢迎积极反馈给我们，我们诚挚地邀请您和我们一起共建 Choerodon Ul。

github 地址：github.com/open-hand/c…

官网 demo：open.hand-china.com/choerodon-u…

动态筛选条使用及属性说明：open.hand-china.com/choerodon-u…