跳到主要内容

数据列表

适用场景#

适用于从数据源中查询多条数据，并将返回列表循环展示的场景，如查询用户列表。

基本功能#

数据查询、筛选、分页#

数据列表组件是获取数据的核心组件之一，可快速从数据模型、APIs 中查询列表，并渲染到页面列表上，含分页等功能。

image-20221024215721765

数据使用和展示#

数据列表是一个数据提供器，所提供的数据，可供所有业务组件使用。具体用法如下：

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

调用 APIs 的参数要求#

调用 APIs 时，调用方法的出入参必须满足以下条件，否则无法正常显示。⚠️

方法入参：
  • pageNo：页码（选填）
  • pageSize：每页大小（选填）
  • orderBy：排序字段名称（选填）。可传值出参 records 中的各字段
    • orderType：排序方式（选填）。升序传 asc,降序传 desc。
方法出参：

  • total：记录总条数（必填）

  • records：对象数组格式的多条数据。注：数组中对象需包含数据唯一标识 _id （文本类型）字段，分页器翻页功能才可以正常使用。

image-20221024221624468

属性介绍#

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

属性名
属性标识
类型
属性分组
默认值
说明
模板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"数据源类型选择
数据模型datasourceobject基础属性-展示模型数据的数据来源
APIsbindConnectMetadataobject基础属性-展示数据的APIs来源选择
调用方法connectorMethodobject基础属性-展示数据的APIs调用方法选择
查询入参connectorParamsstring基础属性-对APIs调用方法获取的数据进行筛选过滤。支持对象类型，例如 {name:'',value:''}
数据筛选wherearray基础属性-对数据进行筛选过滤
排序字段orderBystring基础属性-选取对数据进行排序的字段
排序方式orderType{"label":"升序","value":"asc"}|{"label":"降序","value":"desc"}基础属性"asc"设置升序或降序
显示条数pageSizenumber基础属性5设置单次加载的数据条数
分页pagination{"label":"点击加载更多","value":"loadMoreButton"}|{"label":"触底加载更多","value":"bottomLoad"}|{"label":"分页器","value":"pagination"}|{"label":"不分页","value":"none"}基础属性"loadMoreButton"数据分页样式
显示加载状态isSetStatusboolean基础属性false是否开启数据列表的加载状态，默认不显示
空状态提示emptyTextstring基础属性"暂无数据"无数据时的提示说明，内容为空时则不显示该提示
加载到底提示loadCompletedTextstring基础属性""是否展示数据列表加载全部数据后的提示说明，默认不显示

事件介绍#

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

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

应用示例#

以下示例展示模型用户列表：

1. 添加一个数据容器

image-20221024211426230

2. 选择数据源

数据源支持数据模型和 APIs。

image-20221024205037841

3. 将组件拖入数据列表内，点击绑定字段接口选择数据。

image-20221024205548537

4.  将组件与数据字段绑定，展示用户信息

image-20221024210014699

如此，查询用户列表功能就完成了！完整如下： img