# 设置UI引擎前端页面表格组件属性 表格组件适用于设备列表、生产报表、运维记录、工艺参数台账等各类结构化数据展示场景，支持排序、筛选、分页、编辑、虚拟滚动等精细化功能配置，满足工业场景大数据量、高精度、可交互的数据展示需求。 #### 前提条件 已在当前页面添加"表格"组件，具体操作请参见[为UI引擎前端页面添加物料组件](https://support.huaweicloud.com/usermanual-idme/idme_ui_0016.html)。 #### 配置入口 1. 在页面设计器的中心画布区，单击选中"表格"组件。 2. 在右侧设置面板中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002503567320.png)，即可展开"属性"设置面板。 #### 基础属性 | 属性名称 | 说明 | 是否支持变量绑定 | |:---|:---|:---| | 表格数据 | 表格要展示的结构化数据，格式为对象数组（如设备列表、生产记录等工业数据），支持接口请求数据或静态数据绑定。 | 是 | | 表格列 | 表格的列配置。变量绑定需遵循指定列配置项格式，用于动态控制列的展示与功能，详情请参见[列配置项]。 | 是 | | 加载动画 | 接口请求表格数据时，数据未加载完成前显示的加载效果，需配合状态变量使用。 | 是 | | 调整列宽 | 是否允许用户拖动列边缘调整宽度，适配不同工业数据的展示需求（如长文本工艺描述、短编码字段）。 页面刷新后列宽恢复默认值。 | 是 | | 斑马纹风格 | 表格是否为斑马纹风格。 开启后表格行交替显示背景色，提升海量数据的可读性，便于快速定位目标行（如特定设备编号、工单记录）。 | 是 | | 行数据主键 | 行数据的唯一标识字段，用于优化数据渲染、行选中、编辑等操作的性能。如果不配置，表格将自动生成主键。 | 是 | | 行复选框配置 | 用于定义表格多选行为的各项规则（如触发方式、默认勾选行、可选规则），当表格列中的某一列将"列类型"设置为"多选列"时生效。配置详情请参见[多选配置（行复选框配置）]。 | 是 | | 服务端查询 | 配置服务端数据请求逻辑，需传入包含"api"异步方法的对象，该方法返回表格数据与分页信息，适配海量数据的服务端分页、排序、筛选。 | 是 | | 分页配置 | 配合"服务端查询"使用，配置分页参数（如每页条数、页码样式）。如不使用"服务端查询"，需通过独立"分页"组件实现前端分页，详情请参见[设置UI引擎前端页面分页组件属性](https://support.huaweicloud.com/usermanual-idme/idme_ui_0055.html)。 | 是 | | 虚拟滚动配置 | 优化大数据量表格渲染性能的配置项，分页功能开启时不适用。配置详情请参见[虚拟滚动配置]。 **注意：**开启后需固定所有列宽，且自动禁用列宽调整功能，避免样式错乱，适配万级以上数据展示。 | 是 | | 校验规则 | 配置表格的校验规则，仅在启用"编辑配置项"时有效。 | 是 | | 编辑配置项 | 提供对表格行或列数据进行编辑的功能，支持单元格级别的编辑。配置详情请参见[编辑配置项]。 | 是 | | 展开行配置 | 配置表格行的展开功能，支持默认展开、触发方式、展开内容等。配置详情请参见[展开行配置]。 | 是 | #### 多选配置（行复选框配置） 当表格中存在"多选列"时，用于定义多选行为，如触发方式、默认勾选行、是否显示全选按钮等。 | 字段名称 | 类型 | 是否必填 | 说明 | |:---|:---|:---|:---| | 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\ | 是 | 横向虚拟滚动配置，用于列数过多场景，需固定所有列宽。 | | scrollY | Object\ | 是 | 纵向虚拟滚动配置，用于行数过多场景，需固定所有行高。 | 表1ScrollConfig | 字段名称 | 类型 | 是否必填 | 说明 | |:---|:---|:---|:---| | 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[] ``` | 获取所有翻页保留的选中数据，配合行复选框配置的"reserve"属性使用，适配跨页批量操作。 | | getSelectRecords | ``` () => Record[] ``` | 获取当前页多选选中的数据，适配当前页批量操作需求。 | | getTableData | ``` () => Record[] ``` | 获取当前表格各类数据：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 ``` | 切换所有行的选中状态。 | 表2IExportCsvOptions | 字段名称 | 类型 | 是否必填 | 说明 | |:---|:---|:---|:---| | 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 | 浏览器原生事件，鼠标在表格区域内移动时触发。 |