# 第 3 章：搭建页面 — 从空白到可用

上一章我们把数据表的骨架搭好了，但现在数据只存在于"后台"——用户根本看不到。这一章，我们要把数据**摆上台面**：创建[表格区块](/interface-builder/blocks/data-blocks/table)展示工单数据，配置字段显示、排序、[筛选](/interface-builder/blocks/filter-blocks/form)和分页，让它变成一张真正能用的工单列表。

## 3.1 什么是区块（Block）

在 NocoBase 中，**区块**就是页面上的"积木"。想展示一张表格？放一个[表格区块](/interface-builder/blocks/data-blocks/table)。想展示一个表单？放一个表单区块。一个页面可以自由组合多个区块，还能拖拽调整布局。

常见的区块类型：

| 类型 | 用途 |
|------|------|
| 表格（Table） | 以行列形式展示多条数据 |
| 表单（Form） | 让用户输入或编辑数据 |
| 详情（Details） | 展示单条记录的完整信息 |
| 筛选表单（Filter Form） | 提供筛选条件，过滤其他区块的数据 |
| 图表（Chart） | 饼图、折线图等可视化展示 |
| Markdown | 放一段自定义文字或说明 |

记住这个比喻：**区块 = 积木**，我们接下来就用积木搭出工单管理页面。

## 3.2 添加菜单和页面

首先，我们需要在系统里创建"工单管理"的入口。

1. 点击右上角 **UI 编辑器** 开关，进入界面[配置模式](/get-started/how-nocobase-works)（整个页面会出现橙色的可编辑边框）。
2. 鼠标移到顶部导航栏的 **「添加菜单项（Add menu item）」** 按钮，选择 **「添加分组（Add group）」**，命名为 **「工单管理」**。

![03-building-pages-2026-03-12-09-38-36](https://static-docs.nocobase.com/03-building-pages-2026-03-12-09-38-36.png)


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

![03-building-pages-2026-03-12-09-41-26](https://static-docs.nocobase.com/03-building-pages-2026-03-12-09-41-26.png)

> **注意**：添加页面时会看到「旧版页面（v1）」和「新版页面（v2）」两个选项，本教程统一使用 **v2**。

## 3.3 添加表格区块

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

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

![03-building-pages-2026-03-13-08-44-07](https://static-docs.nocobase.com/03-building-pages-2026-03-13-08-44-07.png)

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

![03-building-pages-2026-03-13-08-44-29](https://static-docs.nocobase.com/03-building-pages-2026-03-13-08-44-29.png)

空表格没有数据不方便调试，我们先快速加一个新建按钮，录入几条测试数据：

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

![03-building-pages-2026-03-17-14-58-39](https://static-docs.nocobase.com/03-building-pages-2026-03-17-14-58-39.png)

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

![03-building-pages-2026-03-17-14-59-42](https://static-docs.nocobase.com/03-building-pages-2026-03-17-14-59-42.png)

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

![03-building-pages-2026-03-17-15-00-54](https://static-docs.nocobase.com/03-building-pages-2026-03-17-15-00-54.png)

![03-building-pages-2026-03-17-15-01-49](https://static-docs.nocobase.com/03-building-pages-2026-03-17-15-01-49.png)

4. 随便填几条工单数据提交，表格里就能看到内容了。

![03-building-pages-2026-03-17-15-03-04](https://static-docs.nocobase.com/03-building-pages-2026-03-17-15-03-04.png)

> 表单的详细配置（字段联动、编辑表单、详情弹窗等）我们在[第 4 章](/tutorials/v2/04-forms-and-details)深入讲解，这里先能录入数据就够了。

## 3.4 配置显示列

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

1. 在表格区块表头右侧，点击 **「[字段](/data-sources/data-modeling/collection-fields)（Fields）」**。
2. 勾选需要展示的字段：
   - **标题** — 工单主题，一眼就能看到
   - **状态** — 当前处理进度
   - **优先级** — 紧急程度
   - **分类** — 关联字段，会显示分类名称
   - **提交人** — 谁提的工单
   - **处理人** — 谁在负责
3. 不需要展示的字段（如 ID、创建时间）就不勾选，保持表格清爽。

![03-building-pages-2026-03-13-08-47-18](https://static-docs.nocobase.com/03-building-pages-2026-03-13-08-47-18.png)

> **小技巧**：字段的显示顺序可以通过拖拽来调整。把最重要的"标题"和"状态"放在前面，方便一眼扫到关键信息。

### 关联字段显示 ID 的问题

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

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

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

![03-building-pages-2026-03-13-09-23-03](https://static-docs.nocobase.com/03-building-pages-2026-03-13-09-23-03.png)

![03-building-pages-2026-03-13-09-57-40](https://static-docs.nocobase.com/03-building-pages-2026-03-13-09-57-40.gif)

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

进入 **设置 → [数据源](/data-sources) → [数据表](/data-sources/data-modeling/collection) → 分类表**，将 **「标题字段」** 改为 **名称**。这样所有引用分类表的地方都会默认显示名称，一劳永逸。修改后需要回到页面重新添加该字段才能生效。
![03-building-pages-2026-03-13-09-23-41](https://static-docs.nocobase.com/03-building-pages-2026-03-13-09-23-41.png)

## 3.5 添加筛选和排序

工单越来越多以后，我们需要快速找到特定工单。NocoBase 提供了多种方式，我们先介绍最常用的 **筛选表单区块**。

### 添加筛选表单

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

![03-building-pages-2026-03-13-08-48-37](https://static-docs.nocobase.com/03-building-pages-2026-03-13-08-48-37.png)

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

![03-building-pages-2026-03-13-09-25-44](https://static-docs.nocobase.com/03-building-pages-2026-03-13-09-25-44.png)

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

![03-building-pages-2026-03-13-10-00-25](https://static-docs.nocobase.com/03-building-pages-2026-03-13-10-00-25.gif)

### 多字段模糊搜索

如果我们想通过一个搜索框同时搜多个字段，怎么做呢？

点击搜索字段右上角的配置项，会看到 **「连接字段（Connect fields）」** 选项。展开后会列出每个区块中可被关联搜索的字段——你会发现默认只连接了「标题」。
![03-building-pages-2026-03-13-09-30-06](https://static-docs.nocobase.com/03-building-pages-2026-03-13-09-30-06.png)

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

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

![03-building-pages-2026-03-13-09-31-35](https://static-docs.nocobase.com/03-building-pages-2026-03-13-09-31-35.png)
![03-building-pages-2026-03-13-09-32-20](https://static-docs.nocobase.com/03-building-pages-2026-03-13-09-32-20.png)

> **连接字段很强大**：它可以跨多个区块、多个字段生效。如果页面上有多个数据区块，不妨自己新建区块试试效果！

### 不想自动筛选？

如果希望用户点击按钮后才触发筛选，可以在筛选表单右下角点击 **「[操作](/interface-builder/actions)（Actions）」**，勾选 **「筛选（Filter）」** 和 **「重置（Reset）」** 按钮。这样用户填好条件后需要手动点击才会执行筛选。
![03-building-pages-2026-03-13-09-33-15](https://static-docs.nocobase.com/03-building-pages-2026-03-13-09-33-15.png)

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

除了独立的筛选表单区块，表格区块本身也带有 **「筛选（Filter）」** 操作按钮。在表格区块上方点击 **「操作（Actions）」**，勾选 **「筛选」**，表格工具栏会出现一个筛选按钮。点击后弹出条件面板，用户可以直接按字段条件过滤数据。
![03-building-pages-2026-03-13-09-34-25](https://static-docs.nocobase.com/03-building-pages-2026-03-13-09-34-25.png)
![03-building-pages-2026-03-13-09-36-09](https://static-docs.nocobase.com/03-building-pages-2026-03-13-09-36-09.png)

如果不想每次点开筛选按钮后再手动找字段，可以在筛选按钮的配置项中预设默认筛选字段，这样用户点开就能直接看到常用的筛选条件。
![03-building-pages-2026-03-13-09-38-37](https://static-docs.nocobase.com/03-building-pages-2026-03-13-09-38-37.png)

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

### 设置默认排序

我们希望最新的工单排在最前面：

1. 点击表格区块右上角的 **区块设置**（三横线图标）。
2. 找到 **「设置[排序](/interface-builder/blocks/data-blocks/table)规则」**。
3. 添加排序字段：选择 **创建时间**，排序方式选 **降序**。

![03-building-pages-2026-03-13-09-40-54](https://static-docs.nocobase.com/03-building-pages-2026-03-13-09-40-54.png)

这样，新提交的工单永远排在最上面，处理起来更方便。

## 3.6 配置行操作

光看列表还不够，我们还需要能点进去查看工单详情，以及编辑工单。

1. 在操作列上方，点击第二个 ”+“ 号。
2. 点击操作：**查看**、**[编辑](../../interface-builder/actions/types/edit.md)**、**[删除](../../interface-builder/actions/types/delete.md)**。
3. 每行数据操作栏位会出现「查看」、「编辑」和「删除」按钮。

![03-building-pages-2026-03-13-09-42-42](https://static-docs.nocobase.com/03-building-pages-2026-03-13-09-42-42.png)

点击「查看」或者「查看」按钮，会打开一个抽屉（Drawer），里面可以放详情区块来展示完整信息。我们下一章会详细配置它。
点击「删除」，这行数据会被清理掉。

## 3.7 调整页面布局

到目前为止，页面上已经有了筛选表单和表格两个区块，但它们默认是上下堆叠的，看起来可能不太美观。NocoBase 支持通过**拖拽**来调整区块的位置和布局。

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

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

![03-building-pages-2026-03-13-11-50-18](https://static-docs.nocobase.com/03-building-pages-2026-03-13-11-50-18.gif)

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

![03-building-pages-2026-03-13-11-50-58](https://static-docs.nocobase.com/03-building-pages-2026-03-13-11-50-58.gif)

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

## 3.8 配置工单分类页面

别忘了我们在 3.2 节创建了「工单分类」子页面，现在来给它添加内容。配置流程和工单列表类似——添加表格区块、勾选字段、配置操作——这里就不重复了，只说一个关键区别。

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

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


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

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

![03-building-pages-2026-03-13-18-51-36](https://static-docs.nocobase.com/03-building-pages-2026-03-13-18-51-36.png)

## 小结

恭喜你！我们的工单系统已经有了一个像样的**管理界面**：

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

是不是比想象中简单？整个过程没有写一行代码，全部通过界面拖拽和配置完成。

## 下一章预告

光能"看"还不够——用户还得能**提交新工单**。下一章，我们来搭建表单区块，配置字段联动规则，还会启用记录历史来追踪工单的每一次变更。

## 相关资源

- [区块概述](/interface-builder/blocks) — 所有区块类型说明
- [表格区块](/interface-builder/blocks/data-blocks/table) — 表格区块详细配置
- [筛选区块](/interface-builder/blocks/filter-blocks/form) — 筛选表单配置
