原子表格

1. 组件概述

原子表格是一个内容展示组件，用于以表格形式展示结构化数据。它支持配置多列信息、自动合并单元格、固定表头、前端分页等功能，适用于需要清晰展示多条数据记录的场景。原子表格需要手动配置数据源，适合展示已有的数据列表。如果需要自动拉取数据并支持增删改查操作，建议使用 CRUD 组件。

加载中...

查看 JSON

复制 JSON

2. 应用场景示例

• 场景一：展示 AI 生成的结构化数据。例如在知识问答应用中，用户提问后，工作流返回一组结构化的知识点列表，使用原子表格展示这些数据。将表格的「数据源」绑定到工作流返回的变量，配置好列信息（如知识点名称、分类、难度等），即可清晰展示 AI 整理的内容。

• 场景二：展示学习进度或答题记录。在答题练习类应用中，用户完成一轮练习后，需要查看本次答题的详细记录。使用原子表格展示每道题的题号、题目、用户答案、正确答案、是否正确等信息，开启「前端分页」方便用户翻页查看。

加载中...

查看 JSON

复制 JSON

3. 功能配置

高级

基本折叠组

配置项	说明
标题	表格的标题文字，显示在表格上方。可以设置为静态文字或绑定变量。
数据源	表格要展示的数据来源。需要绑定一个数组类型的变量，表格会将数组中的每一项显示为一行。例如绑定工作流返回的列表数据变量。
自动匹配列名	开启后，表格会根据数据源中数据项的字段名自动生成列配置，列名和绑定字段都默认为数据中对应的字段名。适用于数据结构不固定或希望快速展示数据的场景。关闭后需要手动配置每一列。
数据精度	统一设置表格中数值类型列的数据精度，即保留几位小数。取值范围 0-6，默认保留 2 位小数。适用于需要统一控制数字显示格式的场景。
保留末尾0	统一设置表格中数值类型列是否保留小数点后末尾的 0。例如设置精度为 2 时，数值 3.5 开启后显示为 3.50，关闭后显示为 3.5。
自动合并单元格	设置从左到右多少列内启用自动合并单元格功能。表格会根据相邻行中这些列的字段值是否相同来决定是否合并。适用于分组数据的展示，如按类别分组的列表。
头部	控制是否显示表格头部区域。开启后可点击「配置头部」按钮自定义头部内容，可以放置标题、说明文字或其他组件。
底部	控制是否显示表格底部区域。开启后可点击「配置底部」按钮自定义底部内容，可以放置汇总信息、操作按钮等。
前端分页	开启后，表格数据会在前端进行分页展示，避免一次性显示过多数据。适用于数据量较大但已全部加载到前端的场景。
每页条数	开启前端分页后，设置每页显示的数据行数，默认为 10 条。可根据页面空间和数据量调整。
懒渲染行数	设置表格数据超过多少行后才开始懒渲染，默认 100 行，取值范围 10-100。懒渲染可以提升大数据量时的渲染性能，只渲染可视区域内的行。

状态折叠组

配置项	说明
可见	控制表格是否显示。默认可见。可以绑定变量实现动态控制，例如在数据加载完成后才显示表格。
隐藏	控制表格是否隐藏。与「可见」相反。

设计

基本折叠组

配置项	说明
列显示开关	是否在表格右上角展示列的显隐控制按钮，用户可以自行选择显示哪些列。可选「自动」（列数大于 5 时自动开启）、「开启」或「关闭」。
是否显示序号	开启后，表格最左侧会自动添加一列序号，从 1 开始递增。适用于需要标识数据顺序的场景。
是否固定表头	开启后，当表格内容超出可视区域需要滚动时，表头会固定在顶部不随内容滚动。默认开启，方便用户在滚动查看数据时始终能看到列标题。
是否开启单条底部展示	如果列太多导致表格显示臃肿，可以开启此功能，将部分列的内容放在当前行的底部展示。开启后可以设置底部默认展开方式。
底部默认展开	开启单条底部展示后可用。设置底部内容的默认展开状态：「第一条」只展开第一行的底部、「所有」展开所有行的底部、「不展开」默认收起。
无数据提示	当表格没有数据时显示的提示文字，默认为「暂无数据」。可以自定义为更友好的提示，如「还没有记录哦」。
行高亮规则	设置行的高亮样式规则，支持根据数据动态设置行的 CSS 类名。例如可以让满足某些条件的行显示不同的背景色。

CSS类名折叠组

配置项	说明
外层	设置表格最外层容器的 CSS 类名，用于自定义整体样式。
表格	设置表格本身的 CSS 类名，用于自定义表格样式。
顶部外层	设置表格头部区域外层容器的 CSS 类名。
底部外层	设置表格底部区域外层容器的 CSS 类名。
工具栏	设置表格工具栏的 CSS 类名。

事件

事件折叠组

配置项	说明
添加事件	表格支持多种触发事件：「选择表格项」在用户勾选或取消勾选行时触发；「列排序」在用户点击列头排序时触发；「列筛选」在用户使用列筛选功能时触发；「列搜索」在用户使用列搜索功能时触发；「行排序」在用户拖拽行进行排序时触发；「列显示变化」在用户通过列显示开关切换列的显隐时触发；「行单击」在用户单击某一行时触发；「行双击」在用户双击某一行时触发；「鼠标移入行事件」在鼠标移入某行时触发；「鼠标移出行事件」在鼠标移出某行时触发。常见用法是在「行单击」事件中打开弹窗显示该行的详细信息，或在「选择表格项」事件中更新其他组件的显示内容。