# 设置UI引擎前端页面模板表格组件属性 模板表格组件是UI引擎封装的高性能表格组件，基于xDM-F数据模型快速生成结构化表格，适用于设备台账管理、生产数据统计、物料库存监控、工序进度跟踪等场景。该组件支持xDM-F模型字段自定义配置、数据过滤、工具栏扩展、操作列自定义、分页控制等功能，可灵活适配数据的展示与交互需求，降低表格开发成本。 #### 前提条件 - 已在当前页面添加"模板表格"组件，具体操作请参见[为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_0000002539236071.png)，即可展开"属性"设置面板。 #### 模型属性 此部分配置用于关联xDM-F数据模型并自定义表格列属性，是快速生成业务表格的核心，直接决定表格的字段结构与展示形态。 | 属性名称 | 说明 | 是否支持变量绑定 | |:---|:---|:---| | xdm模型 | 用于为表格绑定xDM-F数据模型，系统会根据所选模型自动生成对应的表格列。 配置步骤： 1. 单击"选择模型"，弹出"绑定数据模型"窗口。 2. 在弹出的窗口中，依次完成以下选择： - 选择xDM-F模型服务：从下拉列表中选择已在"数据源管理"中创建的xDM-F模型服务。 如果列表为空，请先前往"数据源管理"创建，具体操作请参见[为UI引擎前端项目创建数据源](https://support.huaweicloud.com/usermanual-idme/idme_ui_0107.html)。 - 选择租户：根据所选的xDM-F模型服务，选择其应用运行态下的目标租户。 - 选择目标数据模型：根据所选租户，从其可用模型列表中选择需要绑定的数据模型。 3. 单击"确认"，完成绑定。 | 否 | | 模型字段 | 根据所选"xdm模型"自动生成字段列表，支持以下配置： - 字段状态：设置字段在表格中的显示状态，可选："未使用"、"已使用"。 - 字段排序：拖拽调整列展示顺序。 - 字段编辑：单击字段所在行的![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002541322615.png)进行配置。 - 列名称：表头显示名称（可自定义修改）。 - 列取值字段：对应数据字段（系统自动生成，不可修改）。 - 自定义渲染函数：自定义字段渲染逻辑代码。 - 列宽：设置列宽度。 - 对齐方式：单元格内容对齐方式，可选：左对齐、居中对齐、右对齐。 - 固定位置：列固定位置，可选：左、右。 - 表头对齐方式：表头文字对齐方式，可选：左对齐、居中对齐、右对齐。 - 列最小宽：设置列最小宽度。 - 可拖动列宽：是否允许用户调整列宽。 - 表头是否溢出隐藏：表头文本溢出处理方式，可选：不显示、只显示省略号、原生title、tooltip。 - 列溢出隐藏：单元格文本溢出处理方式，可选：不显示、只显示省略号、原生title、tooltip。 - 是否开启排序：是否启用列排序功能。 - 内置渲染器：选择预设数据格式化方式，可选：整数、小数、货币、百分比、对错图标、年月日、年月日时分、年月日时分秒、时分、时分秒、年月。 | 否 | | 运行页面显示扩展属性 | 仅在使用xDM-F数据模型时生效，用于配置发布后的页面或预览页面是否显示扩展属性。 | 否 | | 配置数据过滤 | 用于为表格设置初始化的默认数据筛选条件，系统将依据配置的条件对表格数据源进行过滤，仅展示符合条件的数据。支持以下两种配置方式： - 单击"数据过滤配置"，在弹出的配置弹窗中配置过滤条件，支持新增多条过滤字段。 - 条件关系： - 与（and）：需同时满足所有配置的过滤条件，数据才会被展示。 - 或（or）：只需满足任一配置的过滤条件，数据即可被展示。 - 名称：选择需过滤的数据源字段名称，该名称必须与表格数据对象的属性名称完全一致。 - 运算符：选择该字段的过滤逻辑，可选：等于、大于、小于、大于等于、小于等于、不等于、模糊匹配、范围、匹配列表任一值。 - 值：自定义设置过滤阈值。 - 代码方式：单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002541282407.png)，在弹出的代码编辑弹窗中，通过编写自定义代码实现可视化配置无法满足的复杂过滤逻辑（如多字段嵌套判断、正则匹配、动态阈值计算等场景）。 | 否 | #### 表格基础属性 | 属性名称 | 说明 | 是否支持变量绑定 | |:---|:---|:---| | 表格数据 | 表格要展示的数据。 "xdm模型"模式下自动加载模型数据，也可通过变量绑定动态替换。 | 是 | | 是否显示边框 | 控制表格是否显示边框。 启用后，表格将显示纵向边框，提升数据行列区分度。 | 否 | | 是否带有斑马纹 | 控制表格是否显示斑马纹。 启用后，表格行交替显示背景色，便于快速定位目标行。 | 否 | | 服务端排序 | 控制排序逻辑是否在服务端执行。 启用后，排序逻辑交由服务端处理，适用于大数据量场景。 | 否 | | 表格加载效果 | 控制数据加载时是否显示动画。 启用后，数据加载时会显示加载动画效果，需配合状态变量使用。 | 是 | | 是否可选 | 配置表格的选中行为。 - 禁用：不可选。 - 单选：支持单选行。 - 多选：支持多选行。 | 否 | | 表格尺寸 | 配置表格的整体尺寸，可选：中等、较小、迷你。 | 否 | | 表格高度 | 设置表格整体高度。 | 否 | | 表格最大高度 | 设置表格的最大高度，超出后显示滚动条。 | 否 | | 表格最小高度 | 设置表格的最小高度，超出后显示滚动条。 | 否 | | 显示序号列 | 控制是否显示序号列。 启用后，表格左侧会显示序号列。 | 否 | | 序号列名称 | 序号列的显示标题。 | 是 | | 自定义索引方法 | 自定义序号列的索引规则，支持传入回调函数实现复杂索引逻辑。 | 是 | | 配置工具栏 | 用于自定义表格工具栏的显示状态及功能组合，实现对表格操作入口的灵活管控。支持以下两种配置方式： - 单击"配置表格工具栏"，在弹出的配置面板中按需配置以下内容： - 显示工具栏：工具栏全局开关。如果设置不显示，则工具栏整体隐藏，后续所有工具栏相关配置项均失效且不可见。 - 显示设置按钮：控制表格工具栏右侧"设置"图标按钮的显示/隐藏状态。 - 代码方式：单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002509781296.png)，在弹出的代码编辑弹窗中，通过编写自定义代码实现工具栏的高度定制化。 | 否 | #### 操作列配置 | 属性名称 | 说明 | 是否支持变量绑定 | |:---|:---|:---| | 显示操作列 | 控制是否显示操作列。 启用后，表格最后一列会显示操作按钮，用于执行特定操作（如编辑、删除）。 | 否 | | 操作列最小宽度 | 设置操作列的最小宽度，默认为120px。 | 否 | | 操作按钮 | 用于为表格行或表格工具栏添加自定义操作按钮，实现数据行级操作（如编辑、删除、详情查看）或批量操作（如导出、审核）等个性化业务功能。支持对操作按钮进行以下配置操作： - 新增：单击"新增"，在弹出的配置弹窗中需设置以下信息： - 按钮文字：配置按钮的显示文本，最多支持输入20个字符。 - 点击执行方法：配置单击按钮后执行的自定义函数。该函数默认包含两个参数： - rowData：当前触发操作的行数据对象（仅对行级按钮生效）。 - tableInstance：表格组件实例对象（可调用表格内置方法，具体方法请参考[组件实例方法](https://support.huaweicloud.com/usermanual-idme/idme_ui_0054.html#ZH-CN_TOPIC_0000002526250733__section445034019114)）。 - 隐藏/展示：单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002541418601.png)/![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002509778604.png)，切换操作按钮的显示状态。 - 删除：单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002509778398.png)，删除已配置的操作按钮（删除后配置信息不可恢复，需重新新增）。 - 编辑：单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002541418457.png)，在弹出的配置弹窗中修改已新增操作按钮的配置信息。 | 否 | #### 分页器属性 | 属性名称 | 说明 | 是否支持变量绑定 | |:---|:---|:---| | 显示分页器 | 控制是否显示分页组件。 启用后，表格底部会显示分页器，默认开启。 | 否 | | 分页配置 | 配置分页器的具体参数，支持每页条数、总条数等动态绑定。 | 是 | | 自定义分页切换 | 控制是否自定义分页切换逻辑。 启用后，分页切换时会触发自定义逻辑，默认关闭。 | 否 | | 是否开启分页拦截 | 控制是否拦截分页切换事件。 启用后，分页切换前会执行拦截逻辑，默认关闭。 | 否 | #### 其他 如下属性适用于UI引擎所有组件，用于精细化控制。 | 属性名称 | 说明 | 是否支持变量绑定 | |:---|:---|:---| | 元素id值 | 对应HTML标签的"id"属性，同一页面内必须唯一。 | 是 | | 样式类 | 对应HTML标签的"class"属性，为空格分隔的类名列表，用于自定义组件样式。默认为"component-base-style"。 | 是 | | ref引用类 | 对应Vue的"ref"属性，用于注册模板引用以访问组件实例方法。 如果为"数据源表单"组件，会自动填充默认值。 | 是 | #### 插槽信息 | 插槽名 | 说明 | |:---|:---| | 工具栏按钮区 | 用于在工具栏区域插入自定义按钮或内容，支持拖拽组件到插槽中实现扩展功能。 |