概述
- 列表组件可以被理解为是对数据列表格式优化后的数据展示，提取每一组数据的关键信息，将其展示为卡片信息，提高数据的可视化效果和美观度。
- 当我们希望对大量元数据进行整合、提取、编辑，同时希望在查看搜索上更加方便、美观时，就可以使用列表组件实现这个效果。如下图所示：
250px|700px|reset
使用说明
（一）配置属性
- 配置页面-示例图：
250px|700px|reset
- 属性配置规则：
属性 | 配置说明 | 图示 |
数据 |
| 250px|700px|reset |
列表字段 | 从「对象」中选取字段，添加到列表的不同位置展示 | |
|
| 250px|700px|reset |
|
点击字段进行字段设置：
| 250px|700px|reset |
|
| 250px|700px|reset |
|
点击字段进行字段设置：
| 副标题设置： 250px|700px|reset 字段设置： 250px|700px|reset |
|
点击字段进行字段设置：
|
250px|700px|reset 字段设置： 250px|700px|reset 切换敏感字段状态按钮： 250px|700px|reset |
列表项按钮 | 在列表组件的右上角添加按钮，创建按钮事件，可添加多个按钮。 点击按钮字段可对按钮进行设置：
列表项按钮设置：
| 250px|700px|reset 250px|700px|reset |
标题区 |
| 250px|700px|reset |
指标卡 |
| 250px|700px|reset |
列表布局 | 对列表的展示格式进行布局
| 250px|700px|reset |
筛选 | 可在列表左上角添加筛选字段，实现列表数据的快速查找。
| 250px|700px|reset 250px|700px|reset |
列表项样式 | 可选择列表项展示样式：
| 250px|700px|reset |
项目分割线 | 开启后，在每个列表项之间，用分割线隔开 | 250px|700px|reset |
ID | 当前列表组件的唯一标识 | 250px|700px|reset |
（二）样式设计
（三）配置事件
使用示例：搭建「学生活动-报名列表」
大体分为 3步：创建数据模型「对象」 - 搭建页面：添加列表组件 - 预览效果
Step 1 创建数据模型「对象」
- 数据模型「对象」配置步骤说明，点击查看：新建自定义对象
- 创建一个「学生」对象，添加相应字段，以满足活动报名的基础信息，如下图所示
250px|700px|reset
Step 2 搭建页面：添加列表组件
- 在画布上拖入一个「顶导航」组件，导航页标题修改为「学生活动」，「侧导航1」名字修改为「报名列表」。
- 在「报名列表」页面拖入「列表」组件。
- 配置「列表」组件数据：
- 选择对象：学生
250px|700px|reset
- 过滤条件：不设置，可显示对象中所有数据
- 排序条件：
- 实现效果：报名顺序倒序排列
- 按照数据创建时间倒序排列，如下图所示
250px|700px|reset
- 配置列表字段
- 图片
- 选择字段：头像
- 图片尺寸：小
- 标题
- 选择字段：姓名
- 副标题
- 选择字段：报名状态、学校
- 详情
- 选择字段：性别、手机号码、邮箱、专业
- 「手机号码」字段设置：显示为敏感字段
- 「邮箱」字段设置：值为空时隐藏该字段
- 详情区域设置：布局-两栏，其他默认设置
- 添加列表项按钮
- 实现效果：点击按钮可直接给这个用户发送飞书消息
实现前提：该用户当前是飞书用户，且通过当前填写的手机号或邮箱注册，才可通过手机号/邮箱建立事件关联。
- 添加按钮，名称修改为：联系Ta
- 具体配置如下图所示：
250px|700px|reset
- 配置标题区
- 标题样式：样式二
- 标题名称：报名列表
- 添加「切换敏感字段状态按钮」
- 添加「展开/收起按钮」
- 添加「标题区按钮」
250px|700px|reset
标题区按钮配置如下：
配置属性 | 配置样式 | 创建事件 |
250px|700px|reset | 250px|700px|reset | 250px|700px|reset |
- 列表布局：使用默认设置
- 配置筛选
- 添加筛选字段：报名状态、姓名、学校
250px|700px|reset
- 配置列表项样式：卡片
250px|700px|reset
- 创建列表事件
- 实现效果：当点击列表行数据项时，可编辑当前行数据
- 具体配置如下：
250px|700px|reset
Step 3 预览配置效果
也可通过「列表布局中」的「列数」设置来调整数据展示效果，如下图将列表分成3列：
250px|700px|reset
