ZartUI — 表格搜索

两种搜索形态:操作按钮右侧内联筛选 / 高级查询抽屉

形态一:操作按钮右侧内联筛选

适用场景:操作按钮 ≤ 6 个且按钮文字较短,筛选项 ≤ 2 个。选择类筛选项可实时过滤,有输入类时显示查询/重置按钮。

变体 1:纯选择类 — 实时筛选,无查询/重置按钮

签收状态
请选择
已签收
待签收
已拒收
案件类型
请选择
环境卫生
道路交通
市政设施
案件号举报人签收状态案件类型操作
AJ20260519001 章小蕙 已签收 环境卫生 编辑
AJ20260518032 李建国 待签收 道路交通 编辑
AJ20260517018 王芳 已拒收 市政设施 编辑
AJ20260516005 刘伟 已签收 道路交通 编辑

变体 2:含输入类 — 需查询/重置按钮

举报人
签收状态
请选择
已签收
待签收
已拒收
案件号举报人签收状态案件类型操作
AJ20260519001 章小蕙 已签收 环境卫生 编辑
AJ20260518032 李建国 待签收 道路交通 编辑
AJ20260517018 王芳 已拒收 市政设施 编辑
AJ20260516005 刘伟 已签收 道路交通 编辑

形态三:搜索条件平铺在表格上方

适用场景:不需要高级搜索抽屉,查询条件直接平铺在操作按钮上方;条件间距 40px,默认单行,超出时点击展开图标展开;查询条件与操作按钮之间贯穿间隔线,间距各 12px。

案件建立时间案件号举报人签收状态问题来源案件类型操作
2026-05-19 09:32 AJ20260519001 章小蕙 已签收 12345热线环境卫生 编辑
2026-05-18 14:20 AJ20260518032 李建国 待签收 市民投诉道路交通 编辑
2026-05-17 16:08 AJ20260517018 王芳 已拒收 网格巡查市政设施 编辑

形态二:高级查询抽屉

适用场景:筛选项较多或有复杂条件组合,点击工具栏「高级查询」按钮从右侧滑入抽屉,确定后工具栏按钮高亮,表格上方显示已选条件标签。

案件建立时间案件号举报人签收状态问题来源案件类型操作
2026-05-19 09:32 AJ20260519001 章小蕙 已签收 12345热线环境卫生 编辑
2026-05-18 14:20 AJ20260518032 李建国 待签收 市民投诉道路交通 编辑
2026-05-17 16:08 AJ20260517018 王芳 已拒收 网格巡查市政设施 编辑
高级查询
至
返回组件首页