# 使用表格类组件展示数据

表格是工作生活中,大家比较常用的数据可视化方式,易于用户浏览和获取信息。

# 功能场景

通过表格中展示结构化数据。

2023-04-10_171131

# 操作详解

# 创建数据表格组件

在数据源下添加CustomInfo实体,实体表如下:

名称 标题 数据类型
name 联系人姓名 String 字符串
phone 电话号码 String 字符串
title 称谓 String 字符串
area 所在地 String 字符串
company 公司 String 字符串
department 部门 String 字符串
job 职位 String 字符串

# 创建数据源

# 说明

表格的数据源是数据集对象或者返回数据集的逻辑。

  1. 在逻辑设计器下添加全局逻辑loadCustomInfoList。

  2. 在相应的全局逻辑下添加输出参数。

  3. 将数据查询赋值给输出参数。

  4. 双击打开此数据查询组件,将CustomInfo实体拖至查询数据源中。

    image-20230605141448232

  5. 在IDE中进入指定页面后,创建逻辑load,调用此逻辑赋值给输出参数。

# 创建数据表格组件

  1. 在IDE中进入指定页面后,在右侧组件栏搜索并拖入数据表格组件。

  2. 打开数据表格的数据源动态绑定,将load逻辑绑定为数据源。

  3. 添加表格列,表格列是用户所希望展示的实体字段。

  4. 拖动文本组件,使得每个字段下都有展示数据的组件。

  5. 将文本值动态绑定为实体中的字段。

    2023-04-10_165429

  6. 所有字段一一对应,最终展示界面如下。

    2023-04-10_165958

# 设置数据表格属性

  • 打开可分页与显示分页大小。

    2023-04-10_170836

  • 打开表头加粗,显示边框,分割线条等等属性。

    2023-04-10_170936

# 实现效果

2023-04-10_171131

# 参考信息

  • 数据表格组件详细说明请参见数据表格

  • 使用表格类组件展示数据还可以通过其他组件进行实现:

上次更新: 2023年06月26日