Skip to content

列表与表格

5 类组件用于展示 行列表、排名、滚动公告。属性分段均为:内容 · 样式 · 数据 · 行为,默认打开 数据

均可 填入示例数据数据源绑定 + 列映射(绑定后预览以接口为准)。


表格 table

用途:固定区域表格,可选分页。

分段配置要点
内容表格尺寸(small/middle/large)、显示表头、边框、分页开关、每页条数、是否可改每页条数
样式背景色、内边距
数据列配置(列名、字段 dataIndex、对齐);行数据 JSON;数据源绑定
行为事件、入场动画

数据格式:行数组,字段名与 columns[].dataIndex 一致。


滚动表格 scrollTable

用途:行数较多时 自动滚动 展示,常用于监控列表。

分段配置要点
内容滚动模式(无缝 / 平滑等)、滚动速度、停顿时间、悬停暂停
样式表头背景/文字/高度;表体背景/文字;边框色;斑马纹;行高;字号;圆角
数据列配置、行数据;数据源绑定
行为事件、入场动画

滚动列表 scrollList

用途:卡片式列表,每项含标题、描述、可选图片。

分段配置要点
内容列表模板、行高、滚动模式/速度/停顿、悬停暂停、是否显示滚动条、图片宽高与圆角
样式项背景/边框/间距/圆角;标题色、描述色;整体背景
数据数据配置titledescimagealign 等字段
行为事件、入场动画

适合新闻、告警、工单类信息流。


横向条形 horizontalBar

用途:横向排名条,支持 多维度 对比(如销量 vs 利润)。

分段配置要点
内容维度管理(系列名、颜色、显隐);名称区宽度;条形高度/圆角/间距;是否显示数值/百分比;图例;滚动相关
样式名称字号颜色;轨道背景;数值字号颜色;行高、项间距、项背景
数据数据配置namevalues[](与维度顺序对应)、可选 image
行为事件、入场动画

数据格式示例{ name: '产品A', values: [80, 60] },维度 2 个则 values 长度为 2。

行点击跳页 / 弹窗 / 外链

预览里 点击某一行(不仅是文字,整条排名行)可跳转,无需 再配 行为 · 交互事件。与 菜单项链接类型 语义相同。

操作步骤

  1. 选中 横向条形 → 右侧 数据 分段。
  2. 编辑数据(打开「横向条形数据」弹窗)。
  3. 在表格最右侧两列:
    • 交互:选 无 / 页面 / 链接 / 弹窗
    • 目标
      • 页面 → 下拉选大屏内某一页
      • 弹窗 → 下拉选要在弹层里展示的页
      • 链接 → 输入 https://...
  4. 弹窗底部 确定
  5. 保存大屏预览 → 点击对应行验证(编辑器画布上 不会 跳页)。

示例:排名前三分别打开三个详情页 — 为三行各设 页面 + 不同目标页。


滚动文字 scrollText

用途:跑马灯公告、横向/纵向滚动文案。

分段配置要点
内容滚动方向(水平/垂直)、滚动速度、悬停暂停、是否显示配图及图片尺寸
样式字号、粗细、颜色、字间距、背景、圆角
数据数据配置text、可选 image 数组
行为事件、入场动画

列表类数据绑定提示

  1. 先用 填入示例数据 确认列/字段结构
  2. 数据源绑定 选择 REST/WS
  3. dataPath 指向数组,如 data.records
  4. 列映射:接口字段 → 组件 dataIndex / 模板字段

详见 数据源


相关文档

巧曦大屏搭建平台 · 联系我们