test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-02 20:09:08 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity
41afc0dd51
amis/docs/zh-CN/components/list.md

191 lines
8.3 KiB
Markdown
Raw Normal View History

文档加上去了
2020-07-28 10:03:53 +08:00
---
title: List 列表
修复路径
2020-07-29 16:20:21 +08:00
description:
文档加上去了
2020-07-28 10:03:53 +08:00
type: 0
group: ⚙ 组件
menuName: List
修复路径
2020-07-29 16:20:21 +08:00
icon:
文档加上去了
2020-07-28 10:03:53 +08:00
order: 56
---
列表展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`Service`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。
## 基本用法
文档文字小调整；统一删掉 schema 中的高度设置；修复 tinymce 弹窗可能被遮挡问题 (#1336) * 文档优化 * 文档细节调整，删除示例的 height 设置，使用自动撑开 * sdk 使用完整例子，因为新版没发布 * 修复官网语言不正确问题 * 增加 icon 调整颜色及大小的例子 * 修复文字错误 * 补充 each 的文档 * 修复 zh-CN 大写问题
2021-01-07 23:35:03 +08:00
```schema: scope="body"
文档加上去了
2020-07-28 10:03:53 +08:00
{
"type": "service",
fix: 修复 popover 弹窗位置不对 (#3074)
2021-11-28 11:18:33 +08:00
"api": "/api/mock2/sample?perPage=5",
文档加上去了
2020-07-28 10:03:53 +08:00
"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",
1.2.x 文档&示例配置调整 (#2064) * 补充容错 * fix: form 中 name 关联顶层数据初始化失效 * 更新 examples * 文档调整 * 删除多余的文档, 调整 schema * schema 调整 * schema 调整 * control 类型容器 control 改成 body * 修复一个选项加载的bug * form 注册直接用 type
2021-06-07 10:09:55 +08:00
"body": [
文档加上去了
2020-07-28 10:03:53 +08:00
{
"label": "Engine",
"name": "engine",
"type": "static"
},
{
"name": "version",
"label": "Version",
"type": "static"
}
]
}
}
}
]
}
}
}
]
}
```
修复路径
2020-07-29 16:20:21 +08:00
或者你也可以使用 CRUD 的 [list 模式](./crud#list-%E5%88%97%E8%A1%A8%E6%A8%A1%E5%BC%8F)
文档加上去了
2020-07-28 10:03:53 +08:00
feat：crud、table、list、card 支持自定义点击某一行的行为 (#2725) * feat：crud、table、list、card 支持自定义点击某一行的行为 * 修复转 JSON Schema 报错
2021-10-20 10:05:02 +08:00
## 单行点击操作
feat: service 支持通过外部函数获取初始数据和更新数据 (#2768) * feat: service 支持通过外部函数获取初始数据和更新数据 * 补点注释 * 避免 service unmount 的时候报错 * 改一下名字，并支持销毁
2021-10-28 18:14:44 +08:00
> 1.4.0 及以上版本
feat：crud、table、list、card 支持自定义点击某一行的行为 (#2725) * feat：crud、table、list、card 支持自定义点击某一行的行为 * 修复转 JSON Schema 报错
2021-10-20 10:05:02 +08:00
配置 itemAction 可以实现点击某一行后进行操作，支持 [action](./action) 里的所有配置，比如弹框、刷新其它组件等。
```schema: scope="body"
{
"type": "service",
fix: 修复 popover 弹窗位置不对 (#3074)
2021-11-28 11:18:33 +08:00
"api": "/api/mock2/sample?perPage=5",
feat：crud、table、list、card 支持自定义点击某一行的行为 (#2725) * feat：crud、table、list、card 支持自定义点击某一行的行为 * 修复转 JSON Schema 报错
2021-10-20 10:05:02 +08:00
"body": [
{
"type": "panel",
"title": "简单 List 示例",
"body": {
"type": "list",
"source": "$rows",
"itemAction": {
"type": "button",
"actionType": "dialog",
"dialog": {
"title": "详情",
"body": "当前行的数据 browser: ${browser}, version: ${version}"
}
},
"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"
}
]
}
}
}
]
}
}
}
]
}
```
文档加上去了
2020-07-28 10:03:53 +08:00
## 属性表
文档拆分组件部分 (#1502) * 文档样式一点小优化 * 文档拆分组件部分
2021-02-01 20:44:49 +08:00
| 属性名 | 类型 | 默认值 | 说明 |
| ------------------------ | ------------------------------------ | --------------------- | ---------------------------------------------------------------------------- |
| type | `string` | | `"list"` 指定为列表展示。 |
| title | `string` | | 标题 |
| source | `string` | `${items}` | 数据源, 获取当前数据域变量，支持[数据映射](../../docs/concepts/data-mapping) |
| placeholder | `string` | ‘暂无数据’ | 当没数据的时候的文字提示 |
| className | `string` | | 外层 CSS 类名 |
| headerClassName | `string` | `amis-list-header` | 顶部外层 CSS 类名 |
| footerClassName | `string` | `amis-list-footer` | 底部外层 CSS 类名 |
| listItem | `Array` | | 配置单条信息 |
| listItem.title | [模板](../../docs/concepts/template) | | 标题 |
| listItem.titleClassName | `string` | `h5` | 标题 CSS 类名 |
| listItem.subTitle | [模板](../../docs/concepts/template) | | 副标题 |
| listItem.avatar | [模板](../../docs/concepts/template) | | 图片地址 |
| listItem.avatarClassName | `string` | `thumb-sm avatar m-r` | 图片 CSS 类名 |
| listItem.desc | [模板](../../docs/concepts/template) | | 描述 |
| listItem.body | `Array` | | 内容容器，主要用来放置非表单项组件 |
| listItem.actions | Array<[Action](./action)> | | 按钮区域 |
list 模式支持按钮在左侧 & 修复 multiple 透传问题 (#1543) * list 模式支持按钮在左侧 & 修复 multiple 透传问题 * 补充属性表
2021-02-05 10:37:26 +08:00
| listItem.actionsPosition | 'left' or 'right' | 默认在右侧 | 按钮位置 |
feat: List组件支持itemClick事件; chore: Picker组件事件名称修正为驼峰格式
2022-10-24 21:04:50 +08:00
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
| 事件名称 | 事件参数 | 说明 | 版本 |
| --------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| itemClick | `item: IItem` | 单行被点击时触发，[`IItem`](./list#iitem)为点击行的信息。注意`itemAction`和`onEvent`是互斥的，List 组件中的`onEvent`会覆盖`itemAction`的行为 | `2.4.0` |
### IItem
| 属性名 | 类型 | 默认值 | 说明 |
| ------ | --------------------- | ------ | ------------------- |
| data | `Record<string, any>` | | 当前行所在数据域 |
| index | `number` | | 行索引值，从 0 开始 |
Reference in New Issue Copy Permalink