主题
列表与表格
5 类组件用于展示 行列表、排名、滚动公告。属性分段均为:内容 · 样式 · 数据 · 行为,默认打开 数据。
均可 填入示例数据、数据源绑定 + 列映射(绑定后预览以接口为准)。
表格 table
用途:固定区域表格,可选分页。
| 分段 | 配置要点 |
|---|---|
| 内容 | 表格尺寸(small/middle/large)、显示表头、边框、分页开关、每页条数、是否可改每页条数 |
| 样式 | 背景色、内边距 |
| 数据 | 列配置(列名、字段 dataIndex、对齐);行数据 JSON;数据源绑定 |
| 行为 | 事件、入场动画 |
数据格式:行数组,字段名与 columns[].dataIndex 一致。
滚动表格 scrollTable
用途:行数较多时 自动滚动 展示,常用于监控列表。
| 分段 | 配置要点 |
|---|---|
| 内容 | 滚动模式(无缝 / 平滑等)、滚动速度、停顿时间、悬停暂停 |
| 样式 | 表头背景/文字/高度;表体背景/文字;边框色;斑马纹;行高;字号;圆角 |
| 数据 | 列配置、行数据;数据源绑定 |
| 行为 | 事件、入场动画 |
滚动列表 scrollList
用途:卡片式列表,每项含标题、描述、可选图片。
| 分段 | 配置要点 |
|---|---|
| 内容 | 列表模板、行高、滚动模式/速度/停顿、悬停暂停、是否显示滚动条、图片宽高与圆角 |
| 样式 | 项背景/边框/间距/圆角;标题色、描述色;整体背景 |
| 数据 | 数据配置:title、desc、image、align 等字段 |
| 行为 | 事件、入场动画 |
适合新闻、告警、工单类信息流。
横向条形 horizontalBar
用途:横向排名条,支持 多维度 对比(如销量 vs 利润)。
| 分段 | 配置要点 |
|---|---|
| 内容 | 维度管理(系列名、颜色、显隐);名称区宽度;条形高度/圆角/间距;是否显示数值/百分比;图例;滚动相关 |
| 样式 | 名称字号颜色;轨道背景;数值字号颜色;行高、项间距、项背景 |
| 数据 | 数据配置:name、values[](与维度顺序对应)、可选 image |
| 行为 | 事件、入场动画 |
数据格式示例:{ name: '产品A', values: [80, 60] },维度 2 个则 values 长度为 2。
行点击跳页 / 弹窗 / 外链
预览里 点击某一行(不仅是文字,整条排名行)可跳转,无需 再配 行为 · 交互事件。与 菜单项链接类型 语义相同。
操作步骤
- 选中 横向条形 → 右侧 数据 分段。
- 点 编辑数据(打开「横向条形数据」弹窗)。
- 在表格最右侧两列:
- 交互:选 无 / 页面 / 链接 / 弹窗
- 目标:
- 页面 → 下拉选大屏内某一页
- 弹窗 → 下拉选要在弹层里展示的页
- 链接 → 输入
https://...
- 弹窗底部 确定。
- 保存大屏 → 预览 → 点击对应行验证(编辑器画布上 不会 跳页)。
示例:排名前三分别打开三个详情页 — 为三行各设 页面 + 不同目标页。
滚动文字 scrollText
用途:跑马灯公告、横向/纵向滚动文案。
| 分段 | 配置要点 |
|---|---|
| 内容 | 滚动方向(水平/垂直)、滚动速度、悬停暂停、是否显示配图及图片尺寸 |
| 样式 | 字号、粗细、颜色、字间距、背景、圆角 |
| 数据 | 数据配置:text、可选 image 数组 |
| 行为 | 事件、入场动画 |
列表类数据绑定提示
- 先用 填入示例数据 确认列/字段结构
- 在 数据源绑定 选择 REST/WS
- dataPath 指向数组,如
data.records - 列映射:接口字段 → 组件
dataIndex/ 模板字段
详见 数据源。
