# 设置UI引擎前端页面数据源表格组件属性 数据源表格组件是UI引擎基于"数据源"功能封装的标准化表格组件，可根据选定的数据源（API/JSON）快速生成结构化表格，适用于设备台账展示、生产数据统计、物料库存管理、工序进度跟踪等场景。该组件支持序号列/选择列自定义、树表层级展示、服务端筛选分页、操作列配置等功能，可灵活对接系统后端接口或静态JSON数据，满足数据可视化与交互需求。 #### 前提条件 - 已在当前页面添加"数据源表格"组件，具体操作请参见[为UI引擎前端页面添加物料组件](https://support.huaweicloud.com/usermanual-idme/idme_ui_0016.html)。 - 已创建数据源，具体操作请参见[为UI引擎前端项目创建数据源](https://support.huaweicloud.com/usermanual-idme/idme_ui_0107.html)。 #### 配置入口 1. 在页面设计器的中心画布区，单击选中"数据源表格"组件。 2. 在右侧设置面板中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002535231469.png)，即可展开"属性"设置面板。 #### 模型属性 此部分的属性用于定义表格的数据源类型及数据规则，是组件生效的关键。 | 属性名称 | 说明 | 是否支持变量绑定 | |:---|:---|:---| | 数据源来源 | 定义表格数据的获取方式。 - API：调用"数据源管理"中已配置的API，动态获取数据。适用于字段需从后端实时加载的场景。 - JSON：手动输入静态的JSON数据作为数据源。适用于字段固定或快速原型设计的场景。 具体配置请参见[数据源配置](https://support.huaweicloud.com/usermanual-idme/idme_ui_0018.html#ZH-CN_TOPIC_0000002493971060__section332912199416)。 | 否 | | 配置项数据 | 根据所选"数据源来源"展示对应配置内容： - API模式：自动关联所选数据源、API及字段集合，无需手动输入。 - JSON模式：手动输入JSON格式的数据源数据。 | 否 | #### 数据源配置 单击"数据源来源"右侧的![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002534908255.png)，在弹出的窗口中，根据选择的"数据源来源"（API/JSON）完成对应参数配置。 | 参数名称 | 说明 | |:---|:---| | 数据源来源 | 选择"API"或"JSON"，决定表单的数据来源类型。 | - "数据源来源"为"API"的配置项： | 参数名称 | 说明 | |:---|:---| | 选择数据源 | 选择需要配置的数据源。 如果没有可选择的数据源，可单击右侧的"新增"，前往"数据源管理"进行创建，具体操作请参见[为UI引擎前端项目创建数据源](https://support.huaweicloud.com/usermanual-idme/idme_ui_0107.html)。 | | 选择API | 选择指定数据源后，进一步指定具体的API。 | | 选择集合 | 选择指定API后，系统列出其返回的数据集合。选择其一以生成字段列表（默认选中第一个非空集合）。 | | 字段列表 | 展示所选集合的所有字段，可配置每个字段是否展示及其对应的表单项类型。 | - "数据源来源"为"JSON"的配置项： | 参数名称 | 说明 | |:---|:---| | 展示字段映射值 | 用于指定从JSON对象中读取哪个属性作为表单项的标签文本。 如未配置，默认读取JSON对象中的"label"属性。 | | prop关键字映射值 | 用于指定从JSON对象中读取哪个属性作为表单项的字段名称（key）。 如未配置，默认读取JSON对象中的"prop"属性。 | | 类型映射值 | 用于指定从JSON对象中读取哪个属性来定义组件的类型。 如未配置，默认使用"componentType"属性。"componentType"可选值： - INPUT（输入框） - SELECT（下拉框） - RADIOGROUP（单选框组） - CHECKBOX（复选框） - CHECKBOXGROUP（复选框组） - DATEPICKER（日期选择器） - TIMEPICKER（时间选择器） - NUMERIC（数字输入框） - FLUENTEDITOR（富文本） - POPEDITOR（弹出编辑） - FILEUPLOAD（文件上传） - USERSELECTOR（选人组件） **注意：**该属性仅适用于表单组件的类型映射。如当前配置为数据源表格，则此属性的值将被忽略。 | | 输入JSON数据 | 用于配置生成表单项的JSON数组。每个数组元素（对象）代表一个表单项，需包含以下三个关键属性： - 展示字段映射值：定义表单项的标签文本（如"label"）。 - prop关键字映射值：定义表单项的字段名称（key，如"prop"）。 - 类型映射值：定义表单项的组件类型（如"componentType"）。 示例： ``` [ { "label": "姓名", "prop": "name", "componentType": "INPUT" } ] ``` 用户输入JSON数组后，可通过输入框底部的功能按钮完成以下操作： - 点击格式化：对输入的JSON数据进行格式化，提升可读性。 - 点击生成字段列表：根据输入的JSON数据，解析并生成对应的字段列表。 | | 字段列表 | 用于展示JSON数据生成的字段列表，可以配置字段是否显示与字段对应的组件类型。 | #### 基础信息 | 属性名称 | 说明 | 是否支持变量绑定 | |:---|:---|:---| | 组件名称 | 当前组件的固定名称，不可修改，用于系统内部标识。 | 否 | | 表格数据 | 表格要展示的数据。 API模式下自动加载后端数据，JSON模式下为手动输入的静态数据。 | 是 | | 序号列配置 | 用于为表格添加自动生成的序号列，方便用户快速定位行数据。单击"点击配置"，在弹出的配置窗口中可设置以下内容： - 是否启用：控制序号列是否在表格中显示。 - 序号列标题：设置序号列的表头文本，最多支持10个字符。 - 列固定：设置序号列的固定方式，可选：固定左侧、固定右侧。 - 列宽（px）：设置序号列的宽度，单位为像素，默认值为60。 | 是 | | 选择列配置 | 用于在表格中添加支持行选择的列，实现单选或多选数据的功能。单击"点击配置"，在弹出的配置窗口中可设置以下内容： - 是否启用：控制是否显示选择列。 - 选择列类型：设置选择方式，可选：单选列、多选列。 - 列固定：设置选择列的固定位置，可选：固定左侧、固定右侧。 - 列宽（px）：设置选择列的宽度，单位为像素，默认值为60。 | 是 | | 树表配置 | 用于将表格数据以树形层级结构展示，适用于展示有层级关联的数据（如组织架构、物料分类、工序流程等）。单击"点击配置"，在弹出的配置窗口中可设置以下内容： - 是否启用：控制表格是否开启树形展示模式。 - 树节点展开列：指定作为树节点展开/折叠操作的列。 - 子级数据字段名：指定数据源中存储子级数据的字段名称。 - 树表配置项：通过JSON格式自定义树表的高级行为。 | 是 | | 加载动画 | 控制数据加载时是否显示动画。 启用后，数据加载时会显示加载动画效果。 | 是 | | 服务端筛选 | 控制筛选逻辑是否在服务端执行。 启用后，筛选逻辑交由服务端处理。 | 是 | | 斑马纹效果 | 控制表格是否显示斑马纹。 启用后，表格行交替显示背景色，提升阅读体验。 | 是 | | 显示设置按钮 | 控制是否显示表格列自定义设置按钮。 启用后，表格右上角会显示设置按钮，用于调整列的显示与隐藏。 | 是 | | 表格内容高度 | 设置表格内容区域高度。 | 是 | | 内容最大高度 | 设置表格内容区域最大高度，超出后显示滚动条。 | 是 | | 表格列配置 | 用于自定义表格中每一列的展示、交互及数据关联规则。 单击"新增一列"，在弹出的配置窗口中可设置以下内容： - 列标题：设置当前列的表头显示文本，用于标识列的业务含义（如"设备编号"）。 - 列键值：设置当前列绑定的数据源字段名称，需与表格数据对象的属性名一致，是列数据渲染的核心关联参数。 - 是否排序：控制当前列是否开启排序功能，默认关闭。开启后，用户可单击表头对该列数据进行升序/降序排列。 - 列固定：设置当前列的固定位置，可选：固定左侧、固定右侧。未配置时随表格滚动条横向滚动。 - 列宽：设置当前列的宽度。未指定时按内容自动适配。 - 最小列宽：设置当前列的最小宽度限制。表格缩放时列宽不会小于该值，避免内容挤压。 - 内置渲染器：选择列数据的展示样式（如整数、小数、百分比、布尔、年月日等），适配不同类型数据的可视化需求。 - 渲染函数：自定义列数据的渲染逻辑，用于实现更复杂的展示效果。 - 编辑配置：配置当前列是否支持行内编辑、编辑控件类型（输入框/下拉框等）、编辑规则等。 - 筛选配置：配置当前列的筛选规则，包括筛选类型（精准匹配/模糊查询/区间筛选等）、默认筛选值、是否显示筛选按钮等。 - 固定显示：控制当前列是否强制显示在表格中，不允许用户通过列显隐操作隐藏。默认关闭。 - 默认显示：控制当前列初始化时是否默认展示，默认开启。关闭时列初始状态为隐藏，用户可手动开启显示。 | 是 | | 操作列配置 | 用于配置表格行级操作按钮，具体配置请参见[操作列配置]。 | 否 | #### 操作列配置 1. 单击"操作列配置"右侧的"点击配置"，在弹出的窗口中，设置以下信息。 - 基础配置 | 参数名称 | 参数说明 | |:---|:---| | 可见按钮数 | 设置操作列默认显示的按钮数量（如3个），超出部分折叠至"更多"菜单。 | | 操作列宽度（单位px） | 宽度默认根据配置的按钮数和可见按钮数计算得出。 如果自定义宽度，请根据实际情况调整，最大可设置为500px。 | | 图标模式 | 按钮是否只显示图标。 开启后，操作列中的按钮将以纯图标形式显示，通过"更多"图标触发隐藏菜单。 | - 按钮配置：最多可添加20条数据。单击"添加"配置单个操作按钮。 | 参数名称 | 参数说明 | |:---|:---| | 名称 | 按钮的显示名称，限制50字符内。 | | 编码 | 按钮的唯一标识符，建议使用大写字母格式，多个单词用_连接，限制50字符内。 | | 图标 | 内置多种图标供选择，如IconArrowDown、IconEdit等。 | | 渲染条件 | 配置按钮是否显示的条件。满足条件时，按钮才会在页面上显示。 | | 禁用条件 | 配置按钮是否禁用的条件。满足条件时，按钮将处于不可单击状态。 | 2. 完成配置后，单击"确定"保存操作列设置。 #### 服务配置 | 属性名称 | 说明 | 是否支持变量绑定 | |:---|:---|:---| | 是否使用服务端配置 | 控制是否启用服务端配置。 启用后，表格数据将通过服务端接口动态加载。 | 否 | | 服务端请求接口 | 配置服务端接口地址，用于动态加载表格数据。 | 是 | #### 分页配置 | 属性名称 | 说明 | 是否支持变量绑定 | |:---|:---|:---| | 是否使用分页 | 控制表格数据是否启用分页展示。 启用后表格将按页加载/展示数据，未启用时所有数据一次性展示。 | 否 | | 切换分页时是否调用服务 | 控制分页切换（如翻页、切换每页条数）时是否重新调用后端接口。 启用后分页操作会触发新的接口请求，加载当前页数据。 | 否 | | 分页模式 | 设置分页组件的整体显示样式，优先级高于"分页组件布局"配置。 可选值：完整模式、不显示分页、只显示分页、极简模式。 | 否 | | 分页组件布局 | 自定义分页组件的元素组合及排列顺序。需通过英文逗号分隔子组件名称，可选子组件类型： - sizes：每页条数选择器。 - prev：上一页。 - pager：页码列表。 - next：下一页。 - jumper：页码跳转输入框。 - current：当前页信息。 - total：数据总数 - slot：自定义插槽。 | 否 | | 每页显示条数 | 配置"sizes"（每页条数选择器）的可选值列表（如"\[10, 20, 50\]"），用于限定用户可选择的单页数据量。 | 否 | #### 其他 | 属性名称 | 说明 | 是否支持变量绑定 | |:---|:---|:---| | 元素id值 | 对应HTML标签的"id"属性，同一页面内必须唯一。 | 是 | | 样式类 | 对应HTML标签的"class"属性，为空格分隔的类名列表，用于自定义组件样式。默认为"component-base-style"。 | 是 | | ref引用类 | 对应Vue的"ref"属性，用于注册模板引用以访问组件实例方法。 如果为"数据源表单"组件，会自动填充默认值。 | 是 | | 父元素响应式监听 | 监听父元素动态变化（如父容器尺寸调整），需将"表格内容高度"设为"auto"。 | 否 | #### 插槽信息 | 插槽名称 | 说明 | |:---|:---| | 设置按钮左侧插槽 | 用于在表格"设置按钮"左侧插入自定义内容（如"导出数据"按钮、"刷新数据"按钮），扩展表格交互功能。 | #### 组件实例方法（属性） 仅可在JS面板中调用，用于脚本控制表格交互，适配动态数据操作需求： | 名称 | 类型定义 | 说明 | |:---|:---|:---| | tableRef | N/A | 转接的TinyGrid表格库"ref"属性，通过此属性可直接访问表格底层实例，用于深度定制表格交互。 | | updateTableData | ``` () => void ``` | 表格配置服务端数据源时，手动调用此方法触发表格数据重新拉取和渲染，适用于主动刷新数据场景。 | | clearTableData | ``` () => void ``` | 清空表格当前展示的所有数据，无参数、无返回值，常用于表单重置、条件清空等场景。 | | setDsData | ``` (data: any) => void ``` | 将表格数据强制重置为传入的"data"参数值，直接替换原有数据并刷新表格展示，适用于动态替换整表数据的场景（如筛选后手动赋值）。 | 使用示例（假设组件"ref"为"gridComp"）： ``` // 1. 访问表格底层实例（tableRef），调用TinyGrid原生方法 const gridInstance = gridComp.tableRef; // 示例：通过底层实例获取表格选中行（TinyGrid原生能力） const selectedRows = gridInstance.getSelectedRows(); console.log('表格选中行：', selectedRows); // 2. 手动更新服务端配置的表格数据 gridComp.updateTableData(); // 3. 清空表格数据（重置场景） gridComp.clearTableData(); // 4. 动态替换表格数据（例如接口返回新数据后赋值） const newTableData = [ { id: 1, name: '张三', age: 25 }, { id: 2, name: '李四', age: 30 } ]; gridComp.setDsData(newTableData); ```