UI 组件 · 表单输入
筛选栏
Filter Bar
也叫：查询栏、搜索表单、筛选条件区、Query Filter
放在列表或表格上方的一排查询条件，如关键字、状态、日期范围，用来缩小要看的数据范围。
点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。
怎么跟 AI 说
改成你的业务内容再发订单列表的表格上方加一个筛选栏：一行放「订单号」输入框、「状态」下拉、「下单时间」日期范围，右侧是「查询」「重置」按钮；条件超过一行时折叠并显示「展开」链接；已选条件同步到网址参数，刷新页面后保留，点重置恢复默认。
发给
01判断
你的内容是这样吗？
对照两列，确认筛选栏是不是你要找的。
02避坑
常见坏用法
看起来能用，其实会给用户添麻烦。
- 01
十几个筛选条件全部平铺，占掉半屏，表格被挤到下面
下面的线框画的就是这种情况，红色虚线框是出问题的地方。右边的线框画的就是这种情况，红色虚线框是出问题的地方。
- 02
筛选条件没有同步到网址，刷新或分享链接后条件全丢
- 03
只有「查询」没有「重置」，也看不出当前生效了哪些条件
03识别
怎么认出它
先看整体结构，再对照几个一眼能认出的特征。
结构
由一组横向排列的查询条件（输入框、下拉选择、日期范围）和「查询」「重置」按钮组成，可带展开收起和已选条件标签。
组成部分点一下，在上面的线框里标出来
识别特征
- 1表格或列表上方一排带标签的输入框和下拉框
- 2最右侧是「查询」「重置」按钮，可能有「展开」链接
- 3或者是一排带下拉箭头的筛选按钮，下方跟着可删除的已选标签
04解释
详细解释
筛选栏是后台列表页的标准配置：表格上方一两行输入框和下拉框（「订单号」「状态」「下单时间」），最右边是「查询」「重置」按钮，条件多时只露出前几项，其余收进「展开」。电商和内容网站常见另一种形态：一排带下拉箭头的筛选按钮（「价格」「品牌」），选中后立即生效，下方显示「已选：华为 ×」这样可删除的标签。
它和 搜索框 的区别：搜索框只有一个关键字输入，筛选栏是多个条件的组合。和 工具栏 的区别：筛选栏决定「看哪些数据」，工具栏决定「对数据做什么」。条件很多又不常用时，可以把完整条件放进 抽屉，筛选栏只保留最常用的两三项。
开发者信息术语 ID、DOM 线索、识别优先级
- 术语 ID
component-filter-bar- DOM 选择器
插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。
.ant-pro-query-filter.ant-form-inline.el-form--inline.arco-form-layout-inline.n-form--inline[class*="filter-bar" i][class*="filterbar" i][role="search"]:has(select, [role="combobox"])
- 类名关键词
类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。
filter-barfilterbarfiltersfilterfilter-panelfilter-formquery-formsearch-formfilter-rowfilter-toolbartable-filterform-inline
- 组件名
React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。
FilterBarFiltersQueryFilterFilterPanelTableFilterSearchForm
- 结构特征
根据元素的排列和样式算出来的特征，只用来加分，单独不判定。
含输入控件
- 优先级
- 3 · 同一层有多条命中时，优先级高的胜出
- 版本
- v2 · 更新于 2026/09/30