设置UI引擎前端页面表格组件属性

表格组件适用于设备列表、生产报表、运维记录、工艺参数台账等各类结构化数据展示场景，支持排序、筛选、分页、编辑、虚拟滚动等精细化功能配置，满足工业场景大数据量、高精度、可交互的数据展示需求。

前提条件

已在当前页面添加“表格”组件，具体操作请参见为UI引擎前端页面添加物料组件。

配置入口

在页面设计器的中心画布区，单击选中“表格”组件。
在右侧设置面板中，单击，即可展开“属性”设置面板。

基础属性

属性名称	说明	是否支持变量绑定
表格数据	表格要展示的结构化数据，格式为对象数组（如设备列表、生产记录等工业数据），支持接口请求数据或静态数据绑定。	是
表格列	表格的列配置。变量绑定需遵循指定列配置项格式，用于动态控制列的展示与功能，详情请参见列配置项。	是
加载动画	接口请求表格数据时，数据未加载完成前显示的加载效果，需配合状态变量使用。	是
调整列宽	是否允许用户拖动列边缘调整宽度，适配不同工业数据的展示需求（如长文本工艺描述、短编码字段）。页面刷新后列宽恢复默认值。	是
斑马纹风格	表格是否为斑马纹风格。开启后表格行交替显示背景色，提升海量数据的可读性，便于快速定位目标行（如特定设备编号、工单记录）。	是
行数据主键	行数据的唯一标识字段，用于优化数据渲染、行选中、编辑等操作的性能。如果不配置，表格将自动生成主键。	是
行复选框配置	用于定义表格多选行为的各项规则（如触发方式、默认勾选行、可选规则），当表格列中的某一列将“列类型”设置为“多选列”时生效。配置详情请参见多选配置（行复选框配置）。	是
服务端查询	配置服务端数据请求逻辑，需传入包含“api”异步方法的对象，该方法返回表格数据与分页信息，适配海量数据的服务端分页、排序、筛选。	是
分页配置	配合“服务端查询”使用，配置分页参数（如每页条数、页码样式）。如不使用“服务端查询”，需通过独立“分页”组件实现前端分页，详情请参见设置UI引擎前端页面分页组件属性。	是
虚拟滚动配置	优化大数据量表格渲染性能的配置项，分页功能开启时不适用。配置详情请参见虚拟滚动配置。注意：开启后需固定所有列宽，且自动禁用列宽调整功能，避免样式错乱，适配万级以上数据展示。	是
校验规则	配置表格的校验规则，仅在启用“编辑配置项”时有效。	是
编辑配置项	提供对表格行或列数据进行编辑的功能，支持单元格级别的编辑。配置详情请参见编辑配置项。	是
展开行配置	配置表格行的展开功能，支持默认展开、触发方式、展开内容等。配置详情请参见展开行配置。	是

多选配置（行复选框配置）

当表格中存在“多选列”时，用于定义多选行为，如触发方式、默认勾选行、是否显示全选按钮等。

字段名称	类型	是否必填	说明
trigger	enum (cell \| row)	否	多选触发方式： cell：单击复选框所在单元格触发。默认为“cell”。 row：单击整行触发，默认单击复选框图标触发。
checkRowKeys	string[]	否	初始化时默认勾选的行主键集合，需配合“行数据主键”使用，适用于默认选中特定工业数据（如重点监控设备）。
checkMethod	() => boolean	否	决定某一行是否可被选中，返回“false”表示不可选中。
checkAll	boolean	否	初始化时是否默认勾选所有行。
showHeader	boolean	否	是否显示表头全选复选框。 “checkStrictly”为“true”时，默认隐藏。
checkStrictly	boolean	否	是否严格遵循父子行不关联规则。开启后表头全选按钮隐藏，适用于工业数据层级展示场景。
reserve	boolean	否	翻页后保留选中状态，需配置“行数据主键”，通过“getAllSelection”方法可获取所有页选中数据，适配跨页批量操作（如跨页导出工单）。

配置示例：

{
    trigger: 'cell',
    checkedRowKeys: ['ROW_1', 'ROW_2'], // 对应设备/工单主键
    checkAll: false,
    showHeader: true,
    reserve: true // 翻页保留选中状态
}

虚拟滚动配置

用于优化大数据量工业数据（如万级设备列表、历史监控数据）的渲染性能，配置格式为对象。

字段名称	类型	是否必要字段	说明
animat	boolean	否	是否启用滚动动画，默认开启。
delayHover	number	否	表格在滚动、拖动等操作后，延迟触发行“hover”事件的时间（单位：毫秒）。默认值为250ms。设置该值可避免高频操作时频繁触发“hover”事件，提升表格性能。
scrollX	Object<ScrollConfig>	是	横向虚拟滚动配置，用于列数过多场景，需固定所有列宽。
scrollY	Object<ScrollConfig>	是	纵向虚拟滚动配置，用于行数过多场景，需固定所有行高。

表1 ScrollConfig
字段名称	类型	是否必填	说明
gt	number	否	定义大于多少范围时自动启动虚拟滚动：列宽总和超过此值启用横向滚动（默认100），行高总和超过此值启用纵向滚动（默认500）。需固定列宽/行高。
oSize	number	否	剩余数据量少于该值时触发重新渲染，默认自动计算。
rSize	number	否	每次渲染的数据条数，默认自动计算，可根据数据复杂度调整。
vSize	number	否	可视区域展示的数据条数，默认自动计算。
rHeight	number	否	指定行高，仅纵向滚动配置“scrollY”有效，默认自动计算，可固定行高以保证渲染准确。
adaptive	boolean	否	是否自动适配最优渲染方式，默认为“true”。

配置示例：

{
    scrollX: {
        gt: 15,
        rSize: 14,
        vSize: 10,
        adaptive: false
    },
    scrollY: {
        gt: 15,
        rSize: 20,
        adaptive: false
    }
}

编辑配置项

用于开启表格编辑功能，适配工业场景数据修正需求（如调整工艺参数、更新设备状态），配置格式为对象。

字段名称	类型	是否必填	说明
trigger	enum (click \| dblclick \| manual)	否	编辑激活方式： click：单击激活。 dblclick：双击激活。 manual：手动通过组件实例方法激活。
mode	enum (cell \| row)	否	编辑范围： cell：单元格编辑。 row：整行编辑。
showStatus	boolean	否	是否显示编辑状态标识，便于区分编辑中与未编辑数据。
activeMethod	({ row: Object, column: Object})=> boolean	否	自定义编辑权限规则，返回“true”可编辑，“false”禁止编辑。

配置示例：

{
    trigger: 'click',
    mode: 'cell', // 单元格编辑
    showStatus: true
}

展开行配置

用于展示行数据详情（如设备运维记录、工单执行明细），配置格式为对象。

字段名称	类型	是否必填	说明
expandAll	boolean	否	初始化时是否展开所有行，默认为“false”，适用于需要批量查看详情的场景。
trigger	enum（default \| row \| cell）	否	展开/收起触发方式： default：单击展开图标。 row：单击整行。 cell：单击单元格。
expandRowKeys	string[]	否	初始化时默认展开的行主键集合，需配合“行数据主键”使用，适用于默认展示特定数据详情（如重点设备运维记录）。
accordion	boolean	否	是否开启手风琴模式。开启后同一层级仅能展开一行，避免详情过多造成界面混乱。
showIcon	boolean	否	是否显示展开/收起图标，默认为“true”。
activeMethod	({row}) => boolean	否	自定义是否渲染展开行。返回“false”表示该行不显示展开功能，适配数据分级展示需求。

配置示例：

{
    expandAll: false,
    trigger: 'default',
    expandRowKeys: ['row_1', 'row_2'], // 对应行主键
    accordion: true, // 手风琴模式
    showIcon: true,
    activeMethod: ({row}) => {
        if (row.rowId === 'row_4') {
            return false; // 隐藏row_4的展开功能
        }
        return true;
    }
}

列属性

用于配置表格单列的展示规则、交互逻辑，适配不同工业数据字段的展示需求（如编码、参数、状态等）。

属性名称	说明	是否支持变量绑定
列标题	表头显示的文本，对应数据字段名称（如“设备编号”、“工艺参数”、“工单状态”）。	否
列键值	对应表格数据源中的字段名称，用于渲染列数据（如设备数据中的“deviceNo”、“paramValue”）。	否
是否排序	表格列是否支持排序，需配合接口使用以保存排序状态。如不配合服务端接口，仅为前端临时排序，数据刷新后排序状态丢失。	否
列宽	配置列的宽度，支持像素（px）、百分比（%），适配不同长度的数据（如短编码用固定宽度，长描述用百分比宽度）。	否
内置渲染器	对列数据进行格式化渲染，适配工业场景常用数据格式。支持：整数、小数、金额、百分比、布尔值、日期（多种格式）、时间、文本省略（鼠标悬浮显示完整内容）。	否
渲染函数	自定义列内容渲染逻辑，可实现复杂数据展示（如设备状态用不同颜色标签标识、参数超出范围标红）。	否
使用插槽	使用插槽自定义表头或列内容。支持两种插槽：header（表头插槽）、default（单元格插槽）。插槽参数包括：row（行数据）、column（列数据）、$table（表格实例）、seq（序号）、cell（单元格）、columnIndex（列索引）、$rowIndex（行索引）。	否
列类型	定义特殊列类型，正常数据列无需配置。索引列：序号列，展示行序号。单选列：支持单选行数据，适配单条数据操作场景。多选列：支持多选行数据，适配批量操作场景。展开列：配合展开行配置，展示行详情入口。	否
编辑配置	单元格编辑的渲染配置，仅支持输入框、下拉选择组件，适配工业数据编辑需求（如下拉选择设备状态、输入工艺参数值）。	否
筛选配置	配置列的筛选规则（如下拉筛选、输入筛选），适配工业场景数据筛选需求（如按设备类型、工单状态筛选）。	否
内容超出部分省略号配置	内容超出列宽时的展示方式。只显示省略号：无法查看完整内容。显示为原生title：鼠标悬浮显示完整内容。显示为tooltip提示：鼠标悬浮以tooltip展示完整内容，适配工业长文本数据（如工艺描述）。	否

列配置项

当“表格列”属性绑定变量时，需遵循此结构化格式配置，用于动态定义列规则。

字段名称	字段类型	是否必填	说明
align	enum (left \| center \| right)	否	列内容对齐方式，适配不同数据类型（如数值类右对齐、文本类左对齐）。
className	string	否	给单元格附加样式类名，用于自定义单元格样式（如数据异常时标红）。
editor	object	否	单元格编辑渲染配置项，对应列属性中的“编辑配置”。
field	string	是	列对应的数据源字段名称，必配字段。
filter	boolean \| FilterConfig	否	列筛选配置，默认为“false”（不筛选），可配置下拉、输入等筛选方式。
fixed	enum (left \| right)	否	固定列位置。 left：左固定。 right：右固定。
headerAlign	enum (left \| center \| right)	否	表头内容对齐方式，可与列内容对齐方式不一致。
indexMethod	({ rowIndex }) => string	否	自定义索引规则，仅“列类型”为“index”时有效。
minWidth	string \| number	否	列最小宽度，避免内容过度压缩。
renderer	(h, { row, column }) => VNode	否	自定义列内容渲染函数，与列属性中的“渲染函数”一致。
resizable	boolean	否	单独控制该列是否允许调整宽度，优先级高于基础属性中的“调整列宽”。
rules	{ [key: string]: object[] }	否	表格编辑时的单元格校验规则，对应基础属性中的“校验规则”。
showHeaderOverflow	string \| boolean	否	表头内容过长时的处理方式： ellipsis：仅省略号。 title：原生提示。 tooltip：tooltip提示。
showHeaderTip	boolean	否	表头是否始终显示tooltip提示，无论内容是否溢出。
showOverflow	string \| boolean	否	列内容过长时的处理方式，与列属性中的“内容超出部分省略号配置”一致。
sortable	boolean	否	单独控制该列是否允许排序，与列属性中的“是否排序”一致。
title	string	否	列标题。注意：“列类型”为特殊列（如index、selection）时可省略，其他情况建议配置。
type	index \| selection \| radio \| expand	否	列类型，与列属性中的“列类型”一致。
width	number \| string	否	列宽度，支持像素、百分比、auto（自动适配）。

示例代码：

[
  { 
    "type": "index",
    "width": 50
  },
  {
    "field": "name",
    "title": "名称",
    "width": 200,
    "minWidth": 150,
    "resizable": true,
    "showOverflow": "tooltip"
  },
  {
    "field": "area",
    "title": "所属区域"
  },
  {
    "field": "address",
    "title": "地址"
  },
  {
    "field": "introduction",
    "title": "公司简介"
  }
]

其他

用于表格的精细化样式控制、标识定义及扩展功能配置，适配界面定制与技术对接需求。

属性名称	说明	是否支持变量绑定
元素id值	对应HTML标签的“id”属性，同一页面内必须唯一。	是
样式类	对应HTML标签的“class”属性，为空格分隔的类名列表，用于自定义组件样式。默认为“component-base-style”。	是
ref引用类	对应Vue的“ref”属性，用于注册模板引用以访问组件实例方法。如果为“数据源表单”组件，会自动填充默认值。	是
响应式监听	开启后，表格宽高随父容器自适应调整，需将表格高度“height”设置为“auto”，适配不同屏幕尺寸展示需求。	是
边框	是否显示表格纵向边框，提升数据行列区分度，适配严谨的界面风格。	是
行号连续	分页时序号是否连续递增，默认为“false”（每页重新从1开始）。开启后适配跨页统计需求。	是
高亮当前行	选中行是否高亮显示，斑马纹行无高亮效果，便于快速定位选中数据（如特定设备、工单）。	是
移入行高亮	鼠标悬浮行是否高亮显示，提升操作体验，便于查看行数据详情。	是
表格高度	表格内容区域（不含表头、表尾）的高度，支持像素、百分比、auto，适配界面布局需求。	是
内容最大高度	表格内容区域的最大高度，超出后显示滚动条，避免表格过高影响界面布局。	是
行合并	配置行合并规则，仅适用于普通表格，嵌套树表不支持，适配工业场景同类数据合并展示（如同一设备的多条运维记录）。	是
所有列列宽	统一设置所有列的宽度，支持像素、百分比，快速适配表格整体布局。	是

插槽信息

用于自定义表格局部内容，适配工业场景个性化展示需求。

插槽名称	说明
空数据	表格无数据时显示的占位内容，默认显示样例数据。如需使用此插槽，需先清空表格的数据源，使其进入无数据状态。常用于展示业务化的空状态提示（如“暂无设备记录”）。

组件实例方法

通过“ref”引用类访问，用于在JS面板中控制表格行为，适配自定义交互需求（如批量操作、数据导出、状态重置）。

方法名称	类型定义	说明
clearActived	() => void	手动清除单元格激活状态。
clearData	(rows: any[], field: string) => void	手动清空单元格内容。无参数清空全表。传“rows”清空指定行。传“rows”和“field”清空指定行指定字段。
clearFilter	(field: string) => void	手动清空筛选条件。无参数清空所有列筛选。传“field”清空指定列筛选，数据恢复未筛选状态。
clearRadioRow	() => void	清空单选行选中状态。
clearRowExpand	() => void	清空所有行展开状态，恢复默认折叠状态。
clearSelected	() => void	手动清除单元格选中状态。
clearSelection	() => void	清空多选行选中状态。
clearSort	() => void	清空排序条件，数据恢复未排序状态。
exportCsv	(options: IExportCsvOptions) => void	导出表格数据为CSV文件，不支持合并行/列。 “options”为一个配置对象，具体属性说明参见表1 IExportCsvOptions。
validate	(rows: IRow \| IRow[], callback: () => void)=> Promise	表格校验。传“rows”校验指定行。无参数校验全表。回调函数返回校验结果。
fullValidate	(rows: IRow[], callback: () => void)=> Promise	全量校验，对数据所有规则完整校验，区别于“validate”（仅校验到首个未通过规则）。
getAllSelection	() => Record<string, any>[]	获取所有翻页保留的选中数据，配合行复选框配置的“reserve”属性使用，适配跨页批量操作。
getSelectRecords	() => Record<string, any>[]	获取当前页多选选中的数据，适配当前页批量操作需求。
getTableData	() => Record<string, any>[]	获取当前表格各类数据：footerData（表尾）、fullData（全量）、visibleData（筛选后可视）、tableData（渲染中数据）。
loadData	(data: IRow[])=> Promise	重载表格数据，适配数据局部更新、增量加载场景（如刷新设备状态）。
revertData	(rows: IRow \| IRow[], field?: string)=> Promise	还原数据：传rows还原指定行；传rows+field还原指定行指定字段；无参数还原全表，适配编辑错误回滚需求。
scrollToColumn	(column: IColumnConfig)=> Promise	滚动到指定列，适配列数过多场景快速定位核心字段。
scrollToRow	(row: IRow)=> Promise	滚动到指定行，适配行数过多场景快速定位目标数据（如特定设备、工单）。
setAllSelection	(checked: boolean)=> void	设置当前页所有行的选中状态。 true：全选当前页所有行。 false：取消当前页所有行的选中状态。
setCurrentRow	(row: IRow)=> Promise	设置某一行为高亮状态，适配高亮当前行场景。
setRadioRow	(row: IRow)=> Promise	设置某一行为单选选中状态，适配单选场景指定选择需求。
setSelection	(rows: IRow \| IRow[], checked: boolean)=> Promise	设置指定行选中状态，checked控制选中/取消，适配批量操作指定选择需求。
toggleAllSelection	() => Promise	切换所有行的选中状态。

表2 IExportCsvOptions
字段名称	类型	是否必填	说明
filename	string	是	导出文件名称（需带固定后缀“.csv”）。
original	boolean	否	是否为原始数据，固定为“true”。
isHeader	boolean	否	是否导出表头。
data	array	是	需要导出的表格数据。
useTabs	boolean	否	是否在每行后面添加制表符。

方法调用示例：

// 访问组件实例
this.$('ref引用类属性值').method()
this.$('tableRef').clearRadioRow() // 清空单选行选中状态

组件事件

表格组件提供丰富的事件监听机制，支持数据操作、用户交互等场景的事件处理。

事件名称	说明
onFilterChange	筛选条件发生变化时触发。
onSortChange	单击列头执行数据排序之前触发。可用于拦截或修改排序逻辑。
onSelectAll	全选框时触发。勾选与取消勾选均会触发。
onSelectChange	单击行数据复选框时触发。
onRadioChange	单击行数据单选框时触发。
onToggleExpandChange	行展开或收起状态切换时触发。
onCurrentChange	当前高亮行发生改变时触发。仅在“highlightCurrentRow”属性为“true”时有效。
onClick	鼠标单击表格区域时触发。浏览器原生事件。注意：由于单击表格内任何区域（含数据行、表头）均会触发，建议谨慎使用。
onChange	浏览器原生事件，元素值发生改变时触发。注意：此事件对表格组件本身通常无效。
onFocus	浏览器原生事件，表格元素获得焦点时触发。
onMousemove	浏览器原生事件，鼠标在表格区域内移动时触发。