跳到主要内容

数据详情

适用场景#

适用于从数据源中查询一条数据,并将返回数据展示的场景,如查询访客预约详情。

基本功能#

1 查询某条数据

数据详情组件是获取数据的核心组件之一,可快速从数据模型、APIs 中查询一条数据,并渲染到页面上。

image-20221024215721765

2 数据使用和展示

数据详情是一个数据提供器,所提供的数据,可供所有业务组件使用。具体用法如下:

将需要绑定数据的组件拖入数据容器内,点击「绑定字段」,即可选择数据容器的数据。

属性介绍#

组件接收的外部传入的属性

属性名
属性标识
类型
属性分组
默认值
说明
数据源dataSourceType{"label":"数据模型","value":"data-model"}|{"label":"APIs","value":"custom-connector"}基础属性"data-model"数据源类型选择
数据模型datasourceobject基础属性-展示模型数据的数据来源
APIsbindConnectMetadataobject基础属性-展示数据的APIs来源选择
调用方法connectorMethodobject基础属性-展示数据的APIs调用方法选择
查询入参connectorParamsstring基础属性-对APIs调用方法获取的数据进行筛选过滤。支持对象类型,例如 {name:'',value:''}
数据筛选wherearray基础属性-对数据进行筛选过滤

事件介绍#

组件暴露的事件,可以监听组件的事件来触发一些外部的动作

事件名
事件code
事件出参 event.detail
适用情况
说明
查询为空queryEmpty兼容三端数据查询为空时触发
查询成功querySuccess兼容三端数据查询成功时触发
查询失败queryFail兼容三端数据查询失败时触发

应用示例#

以下示例展示模型访客详情:

1. 添加一个数据详情组件

image-20221024211426230

2. 选择数据源

数据源支持数据模型和 APIs。查询条件按需设置。如

image-20221024205037841

设置查询筛选条件,数据标识为从其他页面跳转传入的页面 URL 参数 id。

3. 数据容器包裹的所有组件,均可获取查询返回的数据

image-20221024205548537

img

如此,查询访客预约详情就完成了! 绑定数据过程如下: