文档

表格

更新时间:

使用场景

页面编排的页面中需要使用表格进行数据显示和数据操作时,您可以使用表格组件。

使用说明

表格拖入画布后,需要绑定一个类型为List<Structure>的变量,其中Structure为表格中每行数据对应的类型。配置表格变量的步骤既可以在表格刚拖入时进行,也可暂时跳过。把表格拖入画布后,您可以在表格的属性设置中重新对变量进行绑定和配置。

  • 拖入组件时绑定表格变量。表格配置如下图,var_list_object为该表格配置的订单列表,表格每一行的数据为订单信息。绑定变量后弹窗内会显示Structure内的字段及其信息,以及它在表格里对应的列显示名称。您可根据需要在选中1后拖动目标表格行的位置,或修改列显示名称。通过底部批量添加变量字段,您可对每一行数据对应的结构对象类型进行下钻,并选择对应的想要在表格中展示的字段。1

    您可以单击添加容器列,为表格添加容器列。1

  • 拖入组件后再绑定表格变量:1

    表格拖入页面,单击跳过后,您可绑定所需的数据集,并进一步配置表格的其他字段。

配置项

说明

数据(绑定变量)

  • 数据集:表格中显示的数据所对应的数据源。

    • 当数据源为固定值时,您可以单击编辑数据,在数据编辑对话框中设置数据源。

    • 当数据源为动态值时,支持绑定List<Structure>类型的变量。

  • 总数:表格中的数据总计条目数,需为Integer类型的变量。

  • 当前页:表格当前页,需为Integer类型的变量。

  • 主键:表格中每一行数据对应的主键。

  • 迭代变量名:默认为item

  • 索引变量名:默认为index

风格和样式

支持设置表格的奇数行和偶数行是否显示不同的颜色,以及是否显示表头等。

分页设置

表格支持前后翻页,对表格底部的分页栏样式进行自定义配置。

行选择器

  • 若启用行选择器,应用运行时支持勾选一行数据进行后续对应操作。

  • 行选择数据集需为List<Structure>类型,其中Structure为表格单行数据中key对应的数据类型。

  • 支持行选择器属性设置,您可以通过JS方法进行行数据disable规则设置。image.png

操作列

对表格中每行数据能够进行的操作,每项操作都支持配置对应的动作。

使用示例

1

分页设置行选择器为默认设置。操作列中增加详情操作项,支持单击查看选中行的订单详情。1

轻应用部署后效果示例如下图所示。1