amis/docs/zh-CN/components/list.md

5.2 KiB
Executable File

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

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

基本用法

{
  "type": "service",
  "api": "/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",
                  "body": [
                    {
                      "label": "Engine",
                      "name": "engine",
                      "type": "static"
                    },
                    {
                      "name": "version",
                      "label": "Version",
                      "type": "static"
                    }
                  ]
                }
              }
            }
          ]
        }
      }
    }
  ]
}

或者你也可以使用 CRUD 的 list 模式

属性表

属性名 类型 默认值 说明
type string "list" 指定为列表展示。
title string 标题
source string ${items} 数据源, 获取当前数据域变量,支持数据映射
placeholder string ‘暂无数据’ 当没数据的时候的文字提示
className string 外层 CSS 类名
headerClassName string amis-list-header 顶部外层 CSS 类名
footerClassName string amis-list-footer 底部外层 CSS 类名
listItem Array 配置单条信息
listItem.title 模板 标题
listItem.titleClassName string h5 标题 CSS 类名
listItem.subTitle 模板 副标题
listItem.avatar 模板 图片地址
listItem.avatarClassName string thumb-sm avatar m-r 图片 CSS 类名
listItem.desc 模板 描述
listItem.body Array 内容容器,主要用来放置非表单项组件
listItem.actions Array<Action> 按钮区域
listItem.actionsPosition 'left' or 'right' 默认在右侧 按钮位置