检索栏查询报表

适用场景

适合预览时由用户输入访客姓名、部门等条件后重新查询；如果数据量很小且无需请求数据源，直接在报表中展示通常更简单。

最终效果

预览顶部出现“访客”和“部门”两个检索控件及搜索按钮；选择市场部后，只显示匹配记录。

以下截图用于定位检索栏编辑器；示例数据与预期筛选结果见“预览验证”。

本例功能

• 检索栏输入框和下拉框
• 作用域变量与数据集入参绑定
• 搜索按钮触发查询
• serviceInputs 承接外部初始检索值

最小数据集

[
  { "访客": "林川", "部门": "市场部", "来访日期": "2026-06-08", "状态": "已完成" },
  { "访客": "顾夏", "部门": "研发部", "来访日期": "2026-06-09", "状态": "待确认" }
]

下载完整示例数据

下载本地检索 mock

报表结构设计

A1:D1 为明细表头，A2:D2 纵向扩展。检索栏独立于表格模板，放置访客输入框、部门下拉框和搜索按钮。

数据绑定

明细字段依次绑定到 A2:D2。数据集定义 visitorName、department 两个入参；检索控件分别映射同名作用域变量，搜索时把值传给数据源。静态数据集本身不会自动过滤，下载文件只是最小响应样例；实际接口或本地 mock 必须消费这两个入参并返回筛选后的数组。集成方需要预填时，可用 serviceInputs 提供同名初值，但本教程不展开集成参数。

关键配置

配置路径：模板设置 → 作用域配置；数据集 → 入参；检索栏 → 编辑。

1. 在“模板设置 → 作用域配置”创建 visitorName 与 department。
2. 打开数据集“入参”页，将两个入参分别绑定到同名作用域变量。
3. 让数据源按入参过滤。最小 mock 逻辑可以是 rows.filter(row => (!visitorName || row.访客.includes(visitorName)) && (!department || row.部门 === department))；真实接口使用相同输入/输出契约。
4. 打开检索栏编辑器，拖入输入框，字段名称设“访客”，映射 visitorName。
5. 拖入下拉框，字段名称设“部门”，映射 department；再拖入必需的搜索按钮并完成编辑。

本地联调时，将 mock 脚本 与 示例 JSON 保持在同一目录。已下载本仓库时，在仓库根目录执行：

node public/example-data/search-report-mock.mjs

启动后把数据源 URL 设为 http://127.0.0.1:4174/visitors，并将数据源查询参数 visitorName、department 分别映射到同名作用域变量；集成方预填的 serviceInputs.visitorName、serviceInputs.department 也使用这两个名称。浏览器可直接打开该 URL；也可执行以下命令，成功时返回市场部的两条 JSON：

curl "http://127.0.0.1:4174/visitors?department=市场部"

预览验证

• 不输入条件时可看到 3 条示例数据。
• 选择市场部并搜索后，只剩林川、叶青两条。
• 清空条件并再次搜索，完整结果恢复。

常见错误

• 控件值变化但结果不变 → 入参未绑定作用域，或数据源没有消费入参 → 先检查绑定，再确认接口/mock 的过滤逻辑。
• 没有发起查询 → 检索栏缺少搜索按钮 → 添加按钮并用它触发。
• 下拉框无选项 → 未配置可选项来源 → 给部门控件配置静态选项或可选项数据源。

延伸阅读

依次参阅作用域配置、检索控件、数据绑定和可选项数据源。