数据详情
适用场景#
适用于从数据源中查询一条数据，并将返回数据展示的场景，如查询访客预约详情。
基本功能#
1 查询某条数据
数据详情组件是获取数据的核心组件之一，可快速从数据模型、APIs 中查询一条数据，并渲染到页面上。
2 数据使用和展示
数据详情是一个数据提供器，所提供的数据，可供所有业务组件使用。具体用法如下：
将需要绑定数据的组件拖入数据容器内，点击「绑定字段」，即可选择数据容器的数据。
属性介绍#
组件接收的外部传入的属性
属性名 | 属性标识 | 类型 | 属性分组 | 默认值 | 说明 |
|---|
| 数据源 | dataSourceType | {"label":"数据模型","value":"data-model"}|{"label":"APIs","value":"custom-connector"} | 基础属性 | "data-model" | 数据源类型选择 |
| 数据模型 | datasource | object | 基础属性 | - | 展示模型数据的数据来源 |
| APIs | bindConnectMetadata | object | 基础属性 | - | 展示数据的APIs来源选择 |
| 调用方法 | connectorMethod | object | 基础属性 | - | 展示数据的APIs调用方法选择 |
| 查询入参 | connectorParams | string | 基础属性 | - | 对APIs调用方法获取的数据进行筛选过滤。支持对象类型，例如 {name:'',value:''} |
| 数据筛选 | where | array | 基础属性 | - | 对数据进行筛选过滤 |
事件介绍#
组件暴露的事件，可以监听组件的事件来触发一些外部的动作
事件名 | 事件code | 事件出参 event.detail | 适用情况 | 说明 |
|---|
| 查询为空 | queryEmpty | 兼容三端 | 数据查询为空时触发 | |
| 查询成功 | querySuccess | 兼容三端 | 数据查询成功时触发 | |
| 查询失败 | queryFail | 兼容三端 | 数据查询失败时触发 |
应用示例#
以下示例展示模型访客详情：
1. 添加一个数据详情组件
数据源支持数据模型和 APIs。查询条件按需设置。如
设置查询筛选条件，数据标识为从其他页面跳转传入的页面 URL 参数 id。
3. 数据容器包裹的所有组件，均可获取查询返回的数据
如此，查询访客预约详情就完成了！ 绑定数据过程如下：
