跳至主要內容

基础表格 basic-table

2026年7月20日大约 10 分钟

基础表格 basic-table

功能最全的表格：多列、分页、序号 / 单选 / 操作列、行选中、联动。

  • 类型串：basic-table　默认尺寸：[480, 320]　分类：图表与表格

实时预览

下面渲染的是真实组件（与编辑器 / 运行时同源）。修改右侧「样式参数」，左侧预览实时更新；点击底部「全页面查看」可放大。

属性

下表为本组件特有的属性；position / size / opacity / background / border / 联动选中 / 筛选等通用参数见组件手册总览。

basic

属性名称类型默认说明
event-can-cancel-time检测间隔number(unit=ms)500
virtual-scroll-limit滚动限制vector<行数,列数>[100,20]
row-count行数number(min=1)5
table-row-height表格行高number(unit=px,min=0)30
row-spacing行间距number(unit=px)0
autoWidth列宽自适应booleanfalse
hide-empty-tip隐藏空数据提示booleanfalse
select-first-row默认选中首行booleanfalse
keep-row-selected数据更新后保持选中booleanfalse
show-scrollbar显示滚动条booleanfalse
show-scrollbar-vertical纵向滚动booleantrue
show-scrollbar-horizontal横向滚动booleantrue
scrollbar-size滚动条宽度number(min=0,unit=px)3
scrollbar-border-radius滚动条圆角number(min=0,unit=px)3
scrollbar-color滚动条颜色color#a5a5a5
scrollbar-bg-color滚动条背景颜色colortransparent

rowSetting

属性名称类型默认说明
header-height高度number(min=0,unit=px)36
header-margin-bottom间距number(unit=px)0
header-font文字font{"color":"#E6F1FF","size":14,"bold":true,"italic":false}
header-bg-color背景颜色color(gradient)#1087E433
header-bg-image背景图片file(format=image)—
header-bg-image-fill-type填充方式select(radioGroup)stretch可选：stretch / tile / none
header-bg-image-size图片比例number(unit=%)100
header-bg-image-position图片位置vector<X,Y>(unit=px)[0,0]
header-bg-image-use-nine-patch是否使用点九booleanfalse
header-bg-image-nine-patch点九编辑nine-patch{}
header-text-overflow内容过长策略selectellipsis可选：ellipsis / clip / marquee / normal
header-align对齐方式select(radioGroup)center可选：left / center / right
table-row-body-cluster``—
table-count-height高度number(min=0,unit=px)0
table-count-margin-top间距number(unit=px)0
table-count-text文本string总计
table-count-text-style文本样式font{"color":"#E6F1FF","size":14,"bold":false,"italic":false}
table-count-bg-color背景颜色color(gradient)#1087E433
table-count-bg-image背景图片file(format=image)—
table-count-bg-image-fill-type填充方式select(radioGroup)stretch可选：stretch / tile / none
table-count-bg-image-size图片比例number(unit=%)100
table-count-bg-image-position图片位置vector<X,Y>(unit=px)[0,0]
table-count-bg-image-use-nine-patch是否使用点九booleanfalse
table-count-bg-image-nine-patch点九编辑nine-patch{}
table-count-text-overflow内容过长策略selectellipsis可选：ellipsis / clip / marquee / normal
table-count-align对齐方式select(radioGroup)center可选：left / center / right

colSetting

属性名称类型默认说明
order-fixed固定序号列select(radioGroup)left可选：left / right / none
order-width序号列列宽number(min=0,unit=px)0
order-name序号列名称string序号
order-format序号格式string{index}
order-type类型select(radioGroup)number可选：number / roman
order-text-align对齐方式select(radioGroup)center可选：left / center / right
order-bg-color背景颜色color(gradient)transparent
order-bg-image背景图片file(format=image)—
order-bg-image-fill-type填充方式select(radioGroup)stretch可选：stretch / tile / none
order-bg-image-size图片比例number(unit=%)100
order-bg-image-position图片位置vector<X,Y>(unit=px)[0,0]
order-bg-image-use-nine-patch是否使用点九booleanfalse
order-bg-image-nine-patch点九编辑nine-patch{}
order-font-setting字体设置booleanfalse
order-text-font字体font{"color":"#d7e6ff","size":12,"bold":false,"italic":false}
order-icon图标file(format=image,multiple)[]
order-icon-show-row图标显示行数select(radioGroup)all可选：all / diy
order-icon-diy-row自定义行数number(unit=行)0
order-icon-size图标尺寸vector<W,H>(min=0,unit=px)[20,20]
order-icon-zindex图标显示方式select(radioGroup)down可选：up / down
order-condition-setting条件样式booleanfalse
order-condition``—
table-col-body-cluster``—
col-condition-setting条件样式booleanfalse
col-condition``—
operate-click-selected-row点击选中booleanfalse
operate-fixed固定操作列select(radioGroup)right可选：left / right / none
operate-width操作列列宽number(min=0,unit=px)0
operate-name操作列名称string操作
operate-text-align对齐方式select(radioGroup)center可选：left / center / right
operate-font-setting字体设置booleanfalse
operate-font操作项字体font{"color":"#fff","size":12,"bold":false,"italic":false}
operate-separator-font分隔符字体font{"color":"#fff","size":12,"bold":false,"italic":false}
operate-text-list操作项列表string(multiple,draggable,defaultString=操作)[]
operate-separator分隔符string|
operate-condition-setting条件样式booleanfalse
operate-condition``—
radio-fixed固定选框列select(radioGroup)left可选：left / right / none
radio-width选框列列宽number(min=0,unit=px)0
radio-name选框列名称string—
radio-text-align对齐方式select(radioGroup)center可选：left / center / right
radio-bg-color背景颜色color(gradient)transparent
radio-bg-image背景图片file(format=image)—
radio-bg-image-fill-type填充方式select(radioGroup)stretch可选：stretch / tile / none
radio-bg-image-size图片比例number(unit=%)100
radio-bg-image-position图片位置vector<X,Y>(unit=px)[0,0]
radio-bg-image-use-nine-patch是否使用点九booleanfalse
radio-bg-image-nine-patch点九编辑nine-patch{}
radio-style选框样式select(radioGroup)default可选：default / image
radio-image-default默认图标file(format=image)—
radio-image-hover悬停图标file(format=image)—
radio-image-checked选中图标file(format=image)—
radio-font-size选框大小number(min=0,unit=px)10
radio-font-color选框颜色color#ccc

gridLine

属性名称类型默认说明
table-header-line-horizontal-width水平线宽number(min=0,unit=px)2
table-header-line-horizontal-color水平线颜色color#1087E4B3
table-header-line-vertical-width垂直线宽number(min=0,unit=px)1
table-header-line-vertical-color垂直线颜色color#1087E400
table-cell-line-horizontal-width水平线宽number(min=0,unit=px)1
table-cell-line-horizontal-color水平线颜色color#1087E42E
table-cell-line-vertical-width垂直线宽number(min=0,unit=px)1
table-cell-line-vertical-color垂直线颜色color#1087E400

pagination

属性名称类型默认说明
pagination-height高度number(min=0,unit=px)0
connection-pagination数据库分页booleanfalse
pagination-layout功能项配置select(multiple)["total","prev","pager","next","jumper"]可选：total / sizes / prev / pager / next / jumper
pagination-button-size按钮尺寸vector<宽,高>(min=0,unit=px)[28,28]
pager-count最大按钮数number(min=2,unit=个)9
page-size每页数据条数number(unit=条)10
pagination-font字体font{"color":"#D7E6FF","size":13,"bold":false,"italic":false}
pagination-button-bg-color按钮背景色color#1087E426
pagination-button-active-bg-color按钮选中背景色color#1087E4
pagination-button-font页码按钮字体font{"color":"#D7E6FF","size":13,"bold":false,"italic":false}
pagination-button-active-font-color页码选中字体色color#ffffff
pagination-switch-button-font切换按钮字体font{"color":"#D7E6FF","size":13,"bold":false,"italic":false}
pagination-button-disabled-bg-color按钮禁用背景色color#FFFFFF14
pagination-button-disabled-font-color按钮禁用字体色color#6B7C93
pagination-input-size输入框尺寸vector<宽,高>(min=0,unit=px)[48,26]
pagination-input-font输入框字体font{"color":"#fff","size":13,"bold":false,"italic":false}
pagination-input-bg-color输入框背景色color#0F2947
pagination-input-border-color输入框边框色color#1087E466

animation-display

属性名称类型默认说明
animation-display播放动画booleanfalse
animation-display-delay动画延迟时长number<float>(unit=s)1
animation-display-type动画类型select(radioGroup)row可选：row / page
animation-display-type-page-items衔接方式select(radioGroup)showType2可选：showType1 / showType2
animation-display-type-row-items衔接方式select(radioGroup)showType4可选：showType3 / showType4
animation-display-duration单次动画持续number<float>(unit=s)1
animation-display-interval单次动画停留number<float>(unit=s)1
animation-display-loop循环播放动画booleantrue
animation-display-loop-interval循环间隔number<float>(unit=s)2
animation-display-select-stop选中行后暂停booleanfalse

fields

属性名称类型默认说明
remove-trailing-empty-line去除末尾空行booleantrue

sort

属性名称类型默认说明
sort-object排序对象selecttoChoose
sort-type排序方式select(radioGroup)normal可选：normal / ASC / DESC
post-sort-filter排序后数据筛选booleanfalse
post-sort-filter-mode筛选条件selectno-condition可选：no-condition / data-row / data-rows / data-rule
post-sort-filter-row-index筛选行号number(min=1)1
post-sort-filter-start-index筛选起始行号number(min=1)1
post-sort-filter-row-count筛选条数number(min=1)1
post-sort-row-filter-mode-id数据规则select(condition)—

数据绑定

字段槽类型 / 约束说明
cross-filter-key-fieldfield(max=1)选择字段
select-sync-fieldsfield选中字段
table-data-fieldsfield数据字段
table-key-fieldsfield关键字段

事件

触发器

触发器在预览 / 播放态生效（编辑态点击 = 选中组件）。写在本组件 options.interactions 的 groups[].trigger 里。

触发器名称触发时机payload（供动作公式 {:字段} 取值）
click-row点击行点击表格某行时触发整行：{rowNumber, value, row:{别名:值}}
select-row选中行行被选中时触发同 click-row
unselect-row取消选中行行取消选中时触发同 click-row
click-operate点击操作列点击操作列按钮时触发行数据 + 操作项
itemClicked点击某项点击表格某项时触发该项类目维度，如 {城市:"北京"}（仅类目，不含数值）
click点击点击本组件时触发无
mouseEnter鼠标移入指针移入组件时触发无
mouseLeave鼠标移出指针移出组件时触发无
appear入场组件出现时触发（配合进场动画）无
disappear离场组件消失时触发（配合退场动画）无
receiveBehaviorEvent接收行为事件收到 sendBehaviorEvent 动作或宿主 ctx.emit 投递的事件时触发（按 eventName 匹配）发送方携带的 data

动作

触发器命中后执行的动作。本组件既可发起动作（配在自己的交互里），也可作为其它组件动作的目标。

动作名称说明
changeOption修改设置把本组件（或其它组件）的某个属性改为静态值 / 公式动态值
switchState切换状态切到多状态里的某个状态（state:"" 回默认态）
appear / disappear进 / 退场动画对目标 opacity 做 0↔100 插值的显隐动画

完整动作清单（switchScreen / switchWindow / openUrl / sendBehaviorEvent / transfer / executeScript / requestApi 等）与持久化写法见事件交互。

示例

{
  "type": "basic-table",
  "uid": "w_basic_table",
  "options": {
    "position": [40, 40],
    "size": [480, 320],
    "cross-filter-key-field": [["conn_demo", "tbl_demo", "字段名"]],
    "select-sync-fields": [["conn_demo", "tbl_demo", "字段名"]],
    "table-data-fields": [["conn_demo", "tbl_demo", "字段名"]]
  }
}

绑定三元组 [连接uid, 表uid, 字段uid] 指向工程 connections 里的真实字段，见数据系统。

变体示例：分页 + 序号 + 操作列

pagination-height > 0 出分页条、order-width > 0 出序号列、operate-width > 0 出操作列（operate-text-list 定义操作项，点击派发 click-operate）。

变体示例：整页轮播（无人值守大屏）

animation-display: true + animation-display-type: page 让表格按页自动轮播。

组合示例：表格接收饼图选中

见饼图页的组合示例：饼图 select-sync-emit → 本表格 select-sync-receive + select-sync-fields 高亮对应行。

延伸阅读：组件手册总览 · 数据系统 · 事件交互。

上次编辑于: 2026/7/21 14:00:12
贡献者: vjmap,Cursor