List 列表

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

基本用法

```schema: scope=”body” { “type”: “service”, “api”: “/api/mock2/sample?perPage=5”, “body”: [ { “type”: “panel”, “title”: “简单 List 示例”, “body”: { “type”: “list”, “source”: “$rows”, “listItem”: { “body”: [ { “type”: “hbox”, “columns”: [ { “label”: “Engine”, “name”: “engine” },

  1.             {
  2.               "name": "version",
  3.               "label": "Version"
  4.             }
  5.           ]
  6.         }
  7.       ],
  8.       "actions": [
  9.         {
  10.           "type": "button",
  11.           "level": "link",
  12.           "label": "查看详情",
  13.           "actionType": "dialog",
  14.           "dialog": {
  15.             "title": "查看详情",
  16.             "body": {
  17.               "type": "form",
  18.               "body": [
  19.                 {
  20.                   "label": "Engine",
  21.                   "name": "engine",
  22.                   "type": "static"
  23.                 },
  24.                 {
  25.                   "name": "version",
  26.                   "label": "Version",
  27.                   "type": "static"
  28.                 }
  29.               ]
  30.             }
  31.           }
  32.         }
  33.       ]
  34.     }
  35.   }
  36. }

] }

  2. 或者你也可以使用 CRUD 的 [list 模式](./crud#list-%E5%88%97%E8%A1%A8%E6%A8%A1%E5%BC%8F)
  4. ## 单行点击操作
  6. > 1.4.0 及以上版本
  8. 配置 itemAction 可以实现点击某一行后进行操作，支持 [action]($docs-zh-CN-components-action) 里的所有配置，比如弹框、刷新其它组件等。
  10. ```schema: scope="body"
  11. {
  12.   "type": "service",
  13.   "api": "/api/mock2/sample?perPage=5",
  14.   "body": [
  15.     {
  16.       "type": "panel",
  17.       "title": "简单 List 示例",
  18.       "body": {
  19.         "type": "list",
  20.         "source": "$rows",
  21.         "itemAction": {
  22.           "type": "button",
  23.           "actionType": "dialog",
  24.           "dialog": {
  25.             "title": "详情",
  26.             "body": "当前行的数据 browser: ${browser}, version: ${version}"
  27.           }
  28.         },
  29.         "listItem": {
  30.           "body": [
  31.             {
  32.               "type": "hbox",
  33.               "columns": [
  34.                 {
  35.                   "label": "Engine",
  36.                   "name": "engine"
  37.                 },
  39.                 {
  40.                   "name": "version",
  41.                   "label": "Version"
  42.                 }
  43.               ]
  44.             }
  45.           ],
  46.           "actions": [
  47.             {
  48.               "type": "button",
  49.               "level": "link",
  50.               "label": "查看详情",
  51.               "actionType": "dialog",
  52.               "dialog": {
  53.                 "title": "查看详情",
  54.                 "body": {
  55.                   "type": "form",
  56.                   "body": [
  57.                     {
  58.                       "label": "Engine",
  59.                       "name": "engine",
  60.                       "type": "static"
  61.                     },
  62.                     {
  63.                       "name": "version",
  64.                       "label": "Version",
  65.                       "type": "static"
  66.                     }
  67.                   ]
  68.                 }
  69.               }
  70.             }
  71.           ]
  72.         }
  73.       }
  74.     }
  75.   ]
  76. }

属性表

属性名 类型 默认值 说明
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’ 默认在右侧 按钮位置