表格视图

1. 组件概述

表格视图是一个布局容器组件，以 HTML 表格的方式组织和展示内容。与普通的数据表格不同，表格视图更侧重于页面布局，支持单元格合并、自定义样式等功能，可以实现复杂的网格布局效果。适用于需要精确控制内容位置的场景，如报表展示、数据对比、结构化信息呈现等。

加载中...

查看 JSON

复制 JSON

2. 应用场景示例

• 场景一：知识对比展示。在学习辅导类应用中，使用表格视图展示不同概念的对比信息，如”文言文虚词用法对比”。通过合并单元格将相同类别的内容归组，配合不同的背景色区分表头和内容区域，让学生一目了然地理解知识点之间的异同。
• 场景二：AI 分析结果报表。在数据分析类应用中，使用表格视图展示 AI 工作流返回的结构化分析结果。例如展示”各地区销量统计”，通过合并单元格将同一地区的多个城市数据归组，单元格内容可以绑定变量，当工作流返回新数据时自动更新显示。

加载中...

查看 JSON

复制 JSON

3. 功能配置

配置

基本折叠组

配置项	说明
标题	表格的标题文字，显示在表格的上方或下方。可以用来说明表格的用途或数据含义，如”2024年销售数据汇总”。
标题位置	控制标题显示在表格的顶部还是底部。仅在设置了标题后才会显示此配置项。可选：顶部、底部。
视图宽度	设置整个表格的宽度。可以输入具体数值（如 500）或百分比（如 100%）。默认为 100%，即占满父容器宽度。
单元格默认内间距	设置所有单元格内容与边框之间的默认间距。可以输入数值或 CSS 间距值。单个单元格可以单独设置内边距来覆盖此默认值。
显示边框	控制是否显示表格的边框线。默认开启。关闭后表格将没有边框，适合需要无边框布局的场景。
边框颜色	设置表格边框线的颜色。仅在开启”显示边框”时显示此配置项。可以通过颜色选择器选择颜色。

状态折叠组

配置项	说明
可见	控制表格视图是否显示。可以设置为始终可见，或绑定变量根据条件动态控制显示。
隐藏	控制表格视图是否隐藏。与”可见”相反。

---

4. 单元格配置

在编辑器中点击表格内的单元格，可以对单个单元格进行配置。

配置

显示折叠组

配置项	说明
背景色	设置单元格的背景颜色。常用于区分表头行、高亮重要数据等。
文字颜色	设置单元格内文字的颜色。
文字加粗	开启后，单元格内的文字将以粗体显示。常用于表头或需要强调的内容。

布局折叠组

配置项	说明
单元格宽度	设置该单元格的宽度。可以输入具体数值或百分比。不设置时将自动分配宽度。
单元格内边距	设置该单元格内容与边框之间的间距，会覆盖表格的默认内间距设置。
水平对齐	设置单元格内容的水平对齐方式。可选：左对齐、居中、右对齐、两端对齐。
垂直对齐	设置单元格内容的垂直对齐方式。可选：顶部、居中、底部、基线对齐。
水平合并列数	设置该单元格横向合并的列数。例如设置为 2，则该单元格会占据两列的宽度。用于创建跨列的表头或内容区域。
垂直合并列数	设置该单元格纵向合并的行数。例如设置为 3，则该单元格会占据三行的高度。用于创建跨行的分类标签或内容区域。

---

5. 行配置

在编辑器中点击表格的行，可以对整行进行配置。

配置

配置项	说明
行高度	设置该行的高度，输入数值。不设置时行高将根据内容自动调整。
行背景色	设置整行的背景颜色。常用于区分表头行、斑马纹效果等。

---

6. 快捷操作

在编辑器中选中单元格后，可以通过工具栏或右键菜单快速进行以下操作：

操作	说明
左侧新增列	在当前单元格的左侧插入一列新单元格。
右侧新增列	在当前单元格的右侧插入一列新单元格。
上方新增行	在当前单元格的上方插入一行新单元格。
下方新增行	在当前单元格的下方插入一行新单元格。
拆分单元格	将已合并的单元格拆分为多个独立单元格。仅当单元格有跨行或跨列合并时可用。