数据列表
#
适用场景适用于从数据源中查询多条数据,并将返回列表循环展示的场景,如查询用户列表。
#
基本功能#
数据查询、筛选、分页数据列表组件是获取数据的核心组件之一,可快速从数据模型、APIs 中查询列表,并渲染到页面列表上,含分页等功能。
#
数据使用和展示数据列表是一个数据提供器,所提供的数据,可供所有业务组件使用。具体用法如下:
将需要绑定数据的组件拖入数据容器内,点击「绑定字段」,即可选择数据容器的数据。

#
调用 APIs 的参数要求调用 APIs 时,调用方法的出入参必须满足以下条件,否则无法正常显示。⚠️
方法入参:- pageNo:页码(选填)
- pageSize:每页大小(选填)
- orderBy:排序字段名称(选填)。可传值出参 records 中的各字段
- orderType:排序方式(选填)。升序传 asc,降序传 desc。
total:记录总条数(必填)
records:对象数组格式的多条数据。注:数组中对象需包含数据唯一标识 _id (文本类型)字段,分页器翻页功能才可以正常使用。
#
属性介绍组件接收的外部传入的属性
属性名 | 属性标识 | 类型 | 属性分组 | 默认值 | 说明 |
---|
模板 | template | {"label":"空白","value":"none","tooltip":"不使用模板","src":"https://cloudcache.tencent-cloud.com/qcloud/ui/static/static_source_business/924e8472-9c52-46bc-bae7-e1ec30b92974.svg"}|{"label":"简单列表","value":"simpleList","tooltip":"使用简单列表模板","src":"https://cloudcache.tencent-cloud.com/qcloud/ui/static/static_source_business/2563df4d-2db0-449f-a545-825f5a66a848.svg"}|{"label":"详细列表","value":"detailList","tooltip":"使用详细列表模板","src":"https://cloudcache.tencent-cloud.com/qcloud/ui/static/static_source_business/c4f78f1c-f93a-4b40-8253-42541a609fa4.svg"}|{"label":"图文列表","value":"imageTextList","tooltip":"使用图文列表模板","src":"https://cloudcache.tencent-cloud.com/qcloud/ui/static/static_source_business/58cad863-a9b6-4c51-b3f3-d6036ef4d0b7.svg"}|{"label":"卡片列表","value":"cardList","tooltip":"使用卡片列表模板","src":"https://cloudcache.tencent-cloud.com/qcloud/ui/static/static_source_business/d92ff460-bc94-4162-9c0e-d04224dd1919.svg"} | 基础属性 | "simpleList" | 列表内容样式的预设模板 |
数据源 | 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 | 基础属性 | - | 对数据进行筛选过滤 |
排序字段 | orderBy | string | 基础属性 | - | 选取对数据进行排序的字段 |
排序方式 | orderType | {"label":"升序","value":"asc"}|{"label":"降序","value":"desc"} | 基础属性 | "asc" | 设置升序或降序 |
显示条数 | pageSize | number | 基础属性 | 5 | 设置单次加载的数据条数 |
分页 | pagination | {"label":"点击加载更多","value":"loadMoreButton"}|{"label":"触底加载更多","value":"bottomLoad"}|{"label":"分页器","value":"pagination"}|{"label":"不分页","value":"none"} | 基础属性 | "loadMoreButton" | 数据分页样式 |
显示加载状态 | isSetStatus | boolean | 基础属性 | false | 是否开启数据列表的加载状态,默认不显示 |
空状态提示 | emptyText | string | 基础属性 | "暂无数据" | 无数据时的提示说明,内容为空时则不显示该提示 |
加载到底提示 | loadCompletedText | string | 基础属性 | "" | 是否展示数据列表加载全部数据后的提示说明,默认不显示 |
#
事件介绍组件暴露的事件,可以监听组件的事件来触发一些外部的动作
事件名 | 事件code | 事件出参 event.detail | 适用情况 | 说明 |
---|
查询为空 | queryEmpty | 兼容三端 | 数据查询为空时触发 | |
查询成功 | querySuccess | 兼容三端 | 数据查询成功时触发 | |
查询失败 | queryFail | 兼容三端 | 数据查询失败时触发 |
#
应用示例以下示例展示模型用户列表:
1. 添加一个数据容器数据源支持数据模型和 APIs。
如此,查询用户列表功能就完成了!完整如下: