# 表格视图：列表式

来源快照：`result_data_new_260518.json`

- 来源 ID：`1965101620056366037`
- 模块：低代码平台e-builder
- 目录：专题学习 - 功能点专题 - 表单建模
- space ID：`1157961794811633670`
- 原文链接：未提供
- 产品基线：未提供

## 正文

# 1\. 场景说明

  


在一些场景中，我们需要通过列表式布局来更清晰直观的查看数据信息。

如在【家政管理】中，使用列表式布局来展示订单列表表单的数据信息。![](https://weapp.eteams.cn/papi/file/preview?fileId=1157707124742103051&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


# 2\. 功能简介

  


列表式布局层次展示清晰；视觉流线从上向下，浏览体验快捷。

  


# 3\. 操作说明

  


1.如下订单列表表单的运行页面，点击进入列表顶部的基础设置。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157707124905050140&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


2.在基础设置中点击展示样式下拉菜单选择列表式。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157707129039749123&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


3.在展示样式选择列表式后，可以配置①网格，②网格宽度，③网格高度三个功能选项。

功能选项介绍：①网格：默认10行1列，用于配置页面如何显示，根据网格配置来进行分页。例如设置2行5列，则一页显示10条数据；②网格宽度：默认选择自适应，也可设置固定宽度；③网格高度：默认150px，可自行设置高度。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157707129196453902&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


4.完成基础设置之后，显示列设置变为下方配置方式，可设置自定义文本或者选择字段来显示。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157707129039749148&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157707133359882246&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157707133359882255&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


5.表格式与列表式调整对比图：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157707133365592081&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157707137702502410&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)
