mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-30 10:59:42 +08:00
65ac422ed6
* 补充容错 * fix: form 中 name 关联顶层数据初始化失效 * 更新 examples * 文档调整 * 删除多余的文档, 调整 schema * schema 调整 * schema 调整 * control 类型容器 control 改成 body * 修复一个选项加载的bug * form 注册直接用 type
3.3 KiB
Executable File
3.3 KiB
Executable File
title | description | type | group | menuName | icon | order |
---|---|---|---|---|---|---|
Each 循环渲染器 | 0 | ⚙ 组件 | Each 循环渲染器 | 45 |
基本用法
{
"type": "page",
"data": {
"arr": ["A", "B", "C"]
},
"body": {
"type": "each",
"name": "arr",
"items": {
"type": "tpl",
"tpl": "<span class='label label-default m-l-sm'><%= data.item %></span> "
}
}
}
如果是对象数组
如果数组中的数据是对象,可以直接使用 data.xxx 来获取,另外能用 data.index 来获取数组索引,但如果对象本身也有名字为 index 的字段就会覆盖到,获取不到索引了。
{
"type": "page",
"data": {
"arr": [{"name": "a"}, {"name": "b"}, {"name": "c"}]
},
"body": {
"type": "each",
"name": "arr",
"items": {
"type": "tpl",
"tpl": "<span class='label label-default m-l-sm'><%= data.name %>:<%= data.index %></span> "
}
}
}
用作 Field 时
当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时,可以设置name
属性,映射同名变量,然后用可以通过 item
变量获取单项值
Table 中的列类型
{
"type": "table",
"data": {
"items": [
{
"id": "1",
"each": ["A1", "B1", "C1"]
},
{
"id": "2",
"each": ["A2", "B2", "C2"]
},
{
"id": "3",
"each": []
}
]
},
"columns": [
{
"name": "id",
"label": "Id"
},
{
"name": "each",
"label": "循环",
"type": "each",
"placeholder": "暂无内容",
"items": {
"type": "tpl",
"tpl": "<span class='label label-info m-l-sm'><%= this.item %></span>"
}
}
]
}
List 的内容、Card 卡片的内容配置同上
Form 中静态展示
{
"type": "form",
"data": {
"each": ["A", "B", "C"]
},
"body": [
{
"type": "each",
"label": "静态展示each",
"name": "each",
"items": {
"type": "tpl",
"tpl": "<span class='label label-info m-l-sm'><%= this.item %></span>"
}
}
]
}
属性表
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
type | string |
"each" |
指定为 Each 组件 |
value | array |
[] |
用于循环的值 |
name | string |
获取数据域中变量,支持 数据映射 | |
items | object |
使用value 中的数据,循环输出渲染器。 |
|
placeholder | string |
当 value 值不存在或为空数组时的占位文本 |