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

前提条件

• 已在当前页面添加“数据源表格”组件，具体操作请参见为UI引擎前端页面添加物料组件。
• 已创建数据源，具体操作请参见为UI引擎前端项目创建数据源。

配置入口

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

模型属性

此部分的属性用于定义表格的数据源类型及数据规则，是组件生效的关键。

数据源配置

单击“数据源来源”右侧的，在弹出的窗口中，根据选择的“数据源来源”（API/JSON）完成对应参数配置。

• “数据源来源”为“API”的配置项：

  参数名称	说明
  选择数据源	选择需要配置的数据源。 如果没有可选择的数据源，可单击右侧的“新增”，前往“数据源管理”进行创建，具体操作请参见为UI引擎前端项目创建数据源。
  选择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数据生成的字段列表，可以配置字段是否显示与字段对应的组件类型。

基础信息

操作列配置

1. 单击“操作列配置”右侧的“点击配置”，在弹出的窗口中，设置以下信息。
   • 基础配置

     参数名称	参数说明
     可见按钮数	设置操作列默认显示的按钮数量（如3个），超出部分折叠至“更多”菜单。
     操作列宽度（单位px）	宽度默认根据配置的按钮数和可见按钮数计算得出。 如果自定义宽度，请根据实际情况调整，最大可设置为500px。
     图标模式	按钮是否只显示图标。 开启后，操作列中的按钮将以纯图标形式显示，通过“更多”图标触发隐藏菜单。

   • 按钮配置：最多可添加20条数据。单击“添加”配置单个操作按钮。

     参数名称	参数说明
     名称	按钮的显示名称，限制50字符内。
     编码	按钮的唯一标识符，建议使用大写字母格式，多个单词用_连接，限制50字符内。
     图标	内置多种图标供选择，如IconArrowDown、IconEdit等。
     渲染条件	配置按钮是否显示的条件。满足条件时，按钮才会在页面上显示。
     禁用条件	配置按钮是否禁用的条件。满足条件时，按钮将处于不可单击状态。

2. 完成配置后，单击“确定”保存操作列设置。

服务配置

分页配置

其他

插槽信息

组件实例方法（属性）

仅可在JS面板中调用，用于脚本控制表格交互，适配动态数据操作需求：

() => void

() => void

(data: any) => void

使用示例（假设组件“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);