# 点击资产列表展示资产卡片详情

来源快照：`result_data_new_260518.json`

- 来源 ID：`1968368763731505315`
- 模块：低代码平台e-builder
- 目录：专题学习 - 场景专题 - 页面（仪表盘）专题
- space ID：`1157961794811633670`
- 原文链接：未提供
- 产品基线：未提供

## 正文

**1.  ****场景说明  **

在实际业务场景中，我们通常会使用列表组件展示多条数据信息，但是由于页面的的局限性，列表组件很难将所有关键数据字段展示出来，此时就可以利用【数据明细】组件制作每条数据的明细卡片。例如在【实验室管理】应用的移动端页面中，我们利用【列表】组件展示实验的仪器设备信息，点击列表的每一条设备信息，都能展示该设备详细的数据信息卡片。

展示效果如下：  

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705874960515083&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

** **

**2.  ****功能简介**  

上述场景可以通过【列表】组件搭配【数据明细】组件实现。数据明细通常需要新建数据集或者利用已有的数据集作为数据源，目的是为了展示某数据的详细信息，一般与数据列表组件组合使用，通过数据集的条件过滤进行传参，从而展示数据列表中某一数据的详细信息。

  


**3.  ****操作说明**  

1.配置页面列表

点击新建页面-拖入列表组件-进行列表的配置，选取列表数据源、设置列表数据展示样式等，配置效果如下：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705875008020515&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

2.添加数据明细的数据集

之后再新建一个页面作为卡片展示页面，在该页面中拖入数据明细组件，在数据明细右侧的操作栏中选择内容，点击新建进行数据集的添加，如下图所示

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705874864676914&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

数据集的添加需要注意以下几点：

①   数据集名称可以自定义，但是需要为全英文

②   数据源需要列表页面中列表所取得数据源相同，字段可以按照需求选取

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705879159644170&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

③   条件这里是为了进行传参过滤，一般选取数据ID,因为每一条数据的ID是唯一的，可以以此作为过滤依据，右侧可自定义参数（设置条件的目的是为了对应第四步：配置列表事件）。效果如下：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705879159644187&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

3.配置数据明细卡片

数据集添加完成后，可以对数据明细组件的明细进行设置，输入标题，选择内容，以及配置事件动作等，效果如下：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705883546886166&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

此外，数据集不仅可以应用于数据明细组件中，添加数据集之后，在文本组件、HTML组件中都可以进行使用，通过配置可以使整张设备卡片样式更加美观：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705883546886184&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

4.配置列表事件

在第二步的最后，我们在条件中配置了“数据ID={kp}”,在数据明细的字段以及样式配置好之后，我们需要回到列表组组件的页面中，配置列表事件。选中列表组件-事件-添加事件-单击每一条数据。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705887976071184&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

之后选择打开页面动作，链接信息卡片页面地址，参数配置设置为“kp=数据ID”，注意这里的参数名称需要与我们在卡片页面中添加数据集时设置的条件参数相同，如下图所示：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705887976071203&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

5.效果展示：如下图所示，点击一条列表数据，跳转至卡片信息页面，并展示出该条数据详细信息：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705892104003626&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)
