页面搭建教程2.0：从空白到可用完整实战步骤全攻略新手必看

上一章我们完成了数据表的结构设计，但数据还停留在后台，用户无法直接访问。本章将把数据推向前台：通过创建表格区块来展示工单数据，配置字段显示、排序规则、筛选条件和分页功能，使其变为一个可实际操作的工单列表。

3.1 区块（Block）概念解析

在 NocoBase 中，区块是页面上的可复用组件单元。要展示表格，就添加表格区块；需要表单，则添加表单区块。一个页面可以自由组合多种区块，并通过拖拽调整布局。

常见区块类型概览：

将区块想象成构建页面的积木——接下来我们就是用这些积木组装出完整的工单管理界面。

3.2 创建菜单与页面

首先，在系统中建立“工单管理”的导航入口。

1. 点击右上角 UI 编辑器 开关，进入界面配置模式（此时页面会出现橙色可编辑边框）。
2. 将鼠标移至顶部导航栏的 「添加菜单项（Add menu item）」 按钮，选择 「添加分组（Add group）」，命名为 「工单管理」。

3. 顶部导航栏会立即出现「工单管理」菜单。点击它，左侧会展开分组菜单栏。
4. 在左侧菜单栏，点击橙色的 「添加菜单项（Add menu item）」 按钮，选择 「新版页面（v2）（Modern page (v2)）」，依次添加两个子页面：
   • 工单列表 — 展示所有工单记录
   • 工单分类 — 管理分类层级数据

注意：添加页面时存在「旧版页面（v1）」与「新版页面（v2）」两个选项，本教程统一采用 v2。

3.3 添加表格区块

现在进入「工单列表」页面，为其添加一个表格区块：

1. 在空白页面中，点击 「创建区块（Add block）」。
2. 选择 数据区块 → 表格。
3. 在弹出的数据表列表中，选择 「工单」（即上一章创建的 tickets 表）。

表格区块添加成功后，页面上会出现一个空表格。

空表格缺乏数据不便调试，先快速添加一个新建按钮，录入几条测试数据：

1. 点击表格右上角的 「配置操作（Configure actions）」，勾选 「新建（Add new）」。

2. 点击新出现的 「新建」 按钮，在弹窗中选择 添加区块（Add block） → 表单（新增）（Form (Add New)） → 当前数据表（Current collection）。

3. 在弹窗中点击 「配置字段（Configure fields）」，勾选标题、状态、优先级等字段；点击 「配置操作（Configure actions）」，启用 「提交（Submit）」 按钮。

4. 随意填写几条工单数据并提交，表格中就会显示内容。

表单的深入配置（字段联动、编辑表单、详情弹窗等）将在第 4 章详细讲解，目前能录入数据即可。

3.4 配置显示列

默认情况下表格不会自动展示所有字段，需要手动选择要显示的列：

1. 在表格区块表头右侧，点击 「字段（Fields）」。
2. 勾选需要展示的字段：
   • 标题 — 工单主题，便于快速识别
   • 状态 — 当前处理进度
   • 优先级 — 紧急程度
   • 分类 — 关联字段，显示分类名称
   • 提交人 — 工单发起人
   • 处理人 — 负责处理的人员
3. 不需要展示的字段（如 ID、创建时间）可取消勾选，保持表格简洁。

小技巧：字段显示顺序可通过拖拽调整，将最重要的“标题”和“状态”前置，方便快速浏览核心信息。

关联字段显示 ID 的问题

勾选「分类」后，表格中显示的是分类的 ID（数字），而非名称。这是因为关联字段默认以 ID 作为标题字段。有两种修复方案：

方案一：在表格列配置项中修改（仅当前表格生效）

点击「分类」列的配置项，找到 「标题字段（Title field）」，将其从 ID 改为 名称。此方式仅影响当前表格区块。

方案二：在数据源中修改（全局生效，推荐）

进入 设置 → 数据源 → 数据表 → 分类表，将 「标题字段」 改为 名称。这样所有引用分类表的位置都会默认显示名称，一劳永逸。修改后需回到页面重新添加该字段才能生效。

3.5 添加筛选和排序

随着工单数量增多，快速定位特定工单变得必要。NocoBase 提供多种方式，首先介绍最常用的 筛选表单区块。

添加筛选表单

1. 在工单列表页面，点击 「创建区块」，选择 筛选区块 → 筛选表单。
2. v2 页面中无需选择数据表——筛选表单会直接添加到页面上。
3. 在筛选表单中，点击 「字段（Fields）」，会展示当前页面中所有可被筛选的数据区块列表，例如 Table: 工单 #c48b（后面的代码是区块的 UID，用于区分同一张表的多个区块）。

4. 鼠标移到区块名称上，会展开该区块可筛选的字段列表。点击字段即可将其添加为筛选项：状态、优先级、分类。

5. 添加后，用户输入筛选条件，表格数据会实时自动筛选。

多字段模糊搜索

若想用一个搜索框同时搜索多个字段，如何实现？

点击搜索字段右上角的配置项，会看到 「连接字段（Connect fields）」 选项。展开后列出每个区块中可关联搜索的字段——默认只连接了「标题」。

可以选择更多字段，例如：描述，这样用户输入关键字时会同时搜索这些字段。

甚至还能通过关联对象的字段进行筛选——点击「分类」，在下一级选项中勾选「分类名称」，搜索时也会匹配分类名称。

连接字段非常灵活：它可以跨多个区块、多个字段生效。如果页面上有多个数据区块，建议自行新建区块测试效果。

禁止自动筛选

如果希望用户点击按钮后才触发筛选，可在筛选表单右下角点击 「操作（Actions）」，勾选 「筛选（Filter）」 和 「重置（Reset）」 按钮。这样用户填好条件后需要手动点击才会执行筛选。

另一种筛选方式：表格自带的筛选操作

除了独立的筛选表单区块，表格区块本身也带有 「筛选（Filter）」 操作按钮。在表格区块上方点击 「操作（Actions）」，勾选 「筛选」，表格工具栏会出现一个筛选按钮。点击后弹出条件面板，用户可以直接按字段条件过滤数据。

如果不想每次点开筛选按钮后再手动查找字段，可以在筛选按钮的配置项中预设默认筛选字段，这样用户点开后就能直接看到常用条件。

注意：表格自带的筛选操作目前不支持多字段模糊搜索。如需多字段搜索，请使用上面的筛选表单区块配合「连接字段」功能。

设置默认排序

希望最新的工单始终排在最前面：

1. 点击表格区块右上角的 区块设置（三横线图标）。
2. 找到 「设置排序规则」。
3. 添加排序字段：选择 创建时间，排序方式选 降序。

这样，新提交的工单会始终排列在最上方，提升处理效率。

3.6 配置行操作

仅查看列表还不够，还需要能进入工单详情页面，以及编辑工单。

1. 在操作列上方，点击第二个 ”+“ 号。
2. 点击操作：查看、编辑、删除。
3. 每行数据操作栏位会出现「查看」、「编辑」和「删除」按钮。

点击「查看」或「编辑」按钮，会打开一个抽屉（Drawer），里面可以放置详情区块来展示完整信息。下一章将详细配置该部分。
点击「删除」，该行数据将被清除。

3.7 调整页面布局

到目前为止，页面上已有筛选表单和表格两个区块，但它们默认上下堆叠，显示可能不够紧凑。NocoBase 支持通过拖拽调整区块的位置和布局。

在配置模式下，将鼠标移到区块左上角的拖拽手柄上（光标变为十字箭头），按住拖动即可。

将筛选表单拖到表格上方：拖住筛选表单区块，移动到表格区块的上边缘，出现蓝色提示线后松手，筛选表单就会排到表格上面。

将筛选字段拖到同一行：在筛选表单内部，字段默认也是竖向排列的。将「优先级」拖到「状态」右侧，出现竖向提示线后松手，两个字段就会并排显示，节省纵向空间。

NocoBase 中几乎所有元素都支持拖拽——操作按钮、表格列、菜单项等，可自行探索。

3.8 配置工单分类页面

别忘了在 3.2 节创建了「工单分类」子页面，现在来填充内容。配置流程与工单列表类似——添加表格区块、勾选字段、配置操作——这里不再赘述，只说明一个关键区别。

还记得第 2 章创建的「工单分类」表吗？它是一张 树表（支持父子层级）。要让表格正确展示树形结构，需要开启一个配置项：

1. 进入「工单分类」页面，添加一个表格区块，选择「工单分类」数据表。
2. 点击表格区块的 区块设置（三横线图标），找到 「启用树表格（Tree table）」，开启它。

开启后，表格会以缩进层级方式展示父子分类关系，而非平铺所有记录。

3. 勾选需要展示的字段（如名称、描述等），配置行操作（添加、编辑、删除）。
4. 布局建议：将「名称」放在第一列、「操作」栏放在第二列。分类表字段不多，两列布局更简洁高效。

小结

恭喜！工单系统已经有了一个可用的管理界面：

• 清晰的菜单结构（工单管理 → 工单列表 / 工单分类）
• 展示工单数据的表格区块
• 按状态、优先级、分类快速筛选的筛选表单
• 按创建时间降序排列的排序规则
• 行操作按钮，方便查看和编辑
• 展示分类层级的树表格

整个过程无需编写任何代码，完全通过界面拖拽和配置完成，远比想象中简单。

下一章预告

仅仅“查看”还不够——用户还需要能提交新工单。下一章，我们将搭建表单区块，配置字段联动规则，并启用记录历史来追踪工单的每一次变更。