---
title: Each 循环渲染器
description:
type: 0
group: ⚙ 组件
menuName: Each 循环渲染器
icon:
order: 45
---
## 基本用法
```schema:height="160" scope="page"
{
"type": "page",
"data": {
"arr": ["A", "B", "C"]
},
"body": {
"type": "each",
"name": "arr",
"items": {
"type": "tpl",
"tpl": "<%= data.item %> "
}
}
}
```
## 用作 Field 时
当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时,可以设置`name`属性,映射同名变量,然后用可以通过 `item` 变量获取单项值
### Table 中的列类型
```schema:height="300" scope="body"
{
"type": "table",
"data": {
"items": [
{
"id": "1",
"each": ["A1", "B1", "C1"]
},
{
"id": "2",
"each": ["A2", "B2", "C2"]
},
{
"id": "3",
"each": ["A3", "B3", "C3"]
}
]
},
"columns": [
{
"name": "id",
"label": "Id"
},
{
"name": "each",
"label": "循环",
"type": "each",
"items": {
"type": "tpl",
"tpl": "<%= this.item %>"
}
}
]
}
```
List 的内容、Card 卡片的内容配置同上
### Form 中静态展示
```schema:height="300" scope="body"
{
"type": "form",
"data": {
"each": ["A", "B", "C"]
},
"controls": [
{
"type": "each",
"label": "静态展示each",
"name": "each",
"items": {
"type": "tpl",
"tpl": "<%= this.item %>"
}
}
]
}
```
## 属性表
| 属性名 | 类型 | 默认值 | 说明 |
| ------ | -------- | -------- | ----------------------------------------------------------- |
| type | `string` | `"each"` | 指定为 Each 组件 |
| value | `array` | `[]` | 用于循环的值 |
| name | `string` | | 获取数据域中变量,支持 [数据映射](../concepts/data-mapping) |
| items | `object` | | 使用`value`中的数据,循环输出渲染器。 |