---
title: List 列表
description: 
type: 0
group: ⚙ 组件
menuName: List
icon: 
order: 56
---

列表展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`Service`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。

## 基本用法

```schema:height="400" scope="body"
{
  "type": "service",
  "api": "https://houtai.baidu.com/api/sample?perPage=5",
  "body": [
    {
      "type": "panel",
      "title": "简单 List 示例",
      "body": {
        "type": "list",
        "source": "$rows",
        "listItem": {
          "body": [
            {
              "type": "hbox",
              "columns": [
                {
                  "label": "Engine",
                  "name": "engine"
                },

                {
                  "name": "version",
                  "label": "Version"
                }
              ]
            }
          ],
          "actions": [
            {
              "type": "button",
              "level": "link",
              "label": "查看详情",
              "actionType": "dialog",
              "dialog": {
                "title": "查看详情",
                "body": {
                  "type": "form",
                  "controls": [
                    {
                      "label": "Engine",
                      "name": "engine",
                      "type": "static"
                    },
                    {
                      "name": "version",
                      "label": "Version",
                      "type": "static"
                    }
                  ]
                }
              }
            }
          ]
        }
      }
    }
  ]
}
```

或者你也可以使用CRUD的 [list模式](./crud#list-%E5%88%97%E8%A1%A8%E6%A8%A1%E5%BC%8F)

## 属性表

| 属性名                   | 类型                             | 默认值                | 说明                                                       |
| ------------------------ | -------------------------------- | --------------------- | ---------------------------------------------------------- |
| type                     | `string`                         |                       | `"list"` 指定为列表展示。                                  |
| title                    | `string`                         |                       | 标题                                                       |
| source                   | `string`                         | `${items}`            | 数据源, 获取当前数据域变量，支持[数据映射](./data-mapping) |
| placeholder              | `string`                         | ‘暂无数据’            | 当没数据的时候的文字提示                                   |
| className                | `string`                         |                       | 外层 CSS 类名                                              |
| headerClassName          | `string`                         | `amis-list-header`    | 顶部外层 CSS 类名                                          |
| footerClassName          | `string`                         | `amis-list-footer`    | 底部外层 CSS 类名                                          |
| listItem                 | `Array`                          |                       | 配置单条信息                                               |
| listItem.title           | [模板](./template)               |                       | 标题                                                       |
| listItem.titleClassName  | `string`                         | `h5`                  | 标题 CSS 类名                                              |
| listItem.subTitle        | [模板](./template)               |                       | 副标题                                                     |
| listItem.avatar          | [模板](./template)               |                       | 图片地址                                                   |
| listItem.avatarClassName | `string`                         | `thumb-sm avatar m-r` | 图片 CSS 类名                                              |
| listItem.desc            | [模板](./template)               |                       | 描述                                                       |
| listItem.body            | `Array` 或者 [Field](./Field.md) |                       | 内容容器，主要用来放置 [Field](./Field.md)                 |
| listItem.actions         | Array<[Action](./action)>        |                       | 按钮区域                                                   |