mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-02 20:09:08 +08:00
ed5989551e
* docs: mapping组件支持 数组数据源,自定义渲染模板 * feat: mapping组件支持 数组数据源,自定义渲染模板 * test: 增加mapping改造测试用例 Co-authored-by: jinye <jinye@baidu.com>
11 KiB
Executable File
11 KiB
Executable File
| title | description | type | group | menuName | icon | order |
|---|---|---|---|---|---|---|
| Mapping 映射 | 0 | ⚙ 组件 | Mapping 映射 | 57 |
基本用法
{
"type": "page",
"body": {
"type": "mapping",
"value": "1",
"map": {
"1": "第一",
"2": "第二",
"3": "第三",
"*": "其他"
}
}
}
渲染 HTML
{
"type": "page",
"body": {
"type": "mapping",
"value": "2",
"map": {
"1": "<span class='label label-info'>漂亮</span>",
"2": "<span class='label label-success'>开心</span>",
"3": "<span class='label label-danger'>惊吓</span>",
"4": "<span class='label label-warning'>紧张</span>",
"*": "<span class='label label-default'>其他：${type}</span>"
}
}
}
渲染其它组件
映射的值也可以是 amis schema，渲染其它组件
配置了
itemSchema后，映射值不会再作为schema渲染
{
"type": "page",
"body": {
"type": "mapping",
"value": "1",
"map": {
"1": {
"type": "tag",
"label": "#4096ff",
"displayMode": "rounded",
"color": "#4096ff"
},
"2": {
"type": "tpl",
"tpl": "2"
},
"*": "其他"
}
}
}
渲染 自定义模板
since 2.5.2
可配置itemSchema 渲染自定义模板，支持HTML或schema；
当映射值是非object时，可使用${item}获取映射值；
html 或字符串模板
使用${item} 获取映射值
{
"type": "page",
"body": {
"type": "mapping",
"value": "1",
"map": {
"1": "第一",
"2": "第二",
"3": "第三",
"*": "其他"
},
"itemSchema": "自定义模板：<span style='color: red'>${item}</span>"
}
}
SchemaNode模板
{
"type": "page",
"body": {
"type": "mapping",
"value": "1",
"map": {
"1": "第一",
"2": "第二",
"3": "第三",
"*": "其他"
},
"itemSchema": {
"type": "tag",
"label": "${item}"
}
}
}
在模板中渲染数据
- 当映射值是
object时，使用模板语法可获取object属性值 - 当映射值是
非object时，使用${item}获取映射值 - 也可以获取数据域中的其他数据
{
"type": "page",
"data": {
"myName": "cat"
},
"body": {
"type": "mapping",
"value": "1",
"map": {
"1": {
"label": "开心",
"color": "red"
},
"2": {
"label": "伤心",
"color": "blue"
},
"3": {
"label": "冷漠",
"color": "gray"
},
"*": "其他"
},
"itemSchema": {
"type": "tag",
"label": "${myName} ${label}",
"color": "${color}"
}
}
}
映射展示多个
1.5.0 及以上版本
如果返回值是数组会显示为多个
{
"type": "page",
"body": {
"type": "mapping",
"value": ["1", "2", "3", "4", "5"],
"map": {
"1": "<span class='label label-info'>漂亮</span>",
"2": "<span class='label label-success'>开心</span>",
"3": "<span class='label label-danger'>惊吓</span>",
"4": "<span class='label label-warning'>紧张</span>",
"*": "<span class='label label-default'>其他</span>"
}
}
}
map 映射源
k-v 对象
{
"type": "mapping",
"value": "1",
"map": {
"1": "第一",
"2": "第二",
"3": "第三",
"*": "其他"
}
}
对象数组
since 2.5.2
简单对象数组
{
"type": "mapping",
"value": "1",
"map": [
{"1": "第一"},
{"2": "第二"},
{"3": "第三"},
{"*": "其他"}
]
}
多key对象数组
当映射值有多个key时，需要使用valueField指定字段作为mapping的key, 也就是用来匹配value的值
可使用labelField指定展示字段，不配置时，默认为label
**注意：**配置labelField后，映射值无法再作为schema渲染
{
"type": "mapping",
"value": "happy",
"valueField": "name",
"map": [
{
"name": "happy",
"label": "开心",
"color": "red"
},
{
"name": "sad",
"label": "悲伤",
"color": "blue"
},
{
"name": "*",
"label": "其他",
"color": "gray"
}
]
}
{
"type": "page",
"body": {
"type": "mapping",
"value": "happy",
"valueField": "name",
"labelField": "label",
"map": [
{
"name": "happy",
"label": "开心",
"color": "red"
},
{
"name": "sad",
"label": "悲伤",
"color": "blue"
},
{
"name": "*",
"label": "其他",
"color": "gray"
}
]
}
}
用作 Field 时
当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时，可以设置name属性，映射同名变量
Table 中的列类型
{
"type": "table",
"data": {
"items": [
{
"id": "1",
"type": "1"
},
{
"id": "2",
"type": "2"
},
{
"id": "3",
"type": "3"
}
]
},
"columns": [
{
"name": "id",
"label": "Id"
},
{
"name": "type",
"label": "映射",
"type": "mapping",
"map": {
"1": "<span class='label label-info'>漂亮</span>",
"2": "<span class='label label-success'>开心</span>",
"3": "<span class='label label-danger'>惊吓</span>",
"4": "<span class='label label-warning'>紧张</span>",
"*": "其他：${type}"
}
}
]
}
List 的内容、Card 卡片的内容配置同上
Form 中静态展示
{
"type": "form",
"data": {
"type": "2"
},
"body": [
{
"type": "static-mapping",
"name": "type",
"label": "映射",
"map": {
"1": "<span class='label label-info'>漂亮</span>",
"2": "<span class='label label-success'>开心</span>",
"3": "<span class='label label-danger'>惊吓</span>",
"4": "<span class='label label-warning'>紧张</span>",
"*": "其他：${type}"
}
}
]
}
布尔值映射
{
"type": "form",
"data": {
"type": true
},
"body": [
{
"type": "static-mapping",
"name": "type",
"label": "映射",
"map": {
"1": "<span class='label label-info'>开</span>",
"0": "<span class='label label-default'>关</span>"
}
}
]
}
或者
{
"type": "form",
"data": {
"type": true
},
"body": [
{
"type": "static-mapping",
"name": "type",
"label": "映射",
"map": {
"true": "<span class='label label-info'>开</span>",
"false": "<span class='label label-default'>关</span>"
}
}
]
}
远程拉取字典
since 1.1.6
通过配置 source 接口来实现，接口返回字典对象即可，数据格式参考 map 配置。
{
"type": "form",
"data": {
"type": "2"
},
"body": [
{
"type": "mapping",
"name": "type",
"label": "映射",
"source": "/api/mapping"
}
]
}
默认 source 是有 30s 缓存的，通常字典数据不长变更。如果想修改，请参考 API 文档配置缓存。
关联上下文变量
since 1.1.6
同样通过配置 source 来实现，只是格式是取变量。
注意：当数据域里的变量值为
$$时, 表示将所有接口返回的data字段值整体赋值到对应的 key 中
{
"type": "form",
"initApi": {
"url": "/api/mapping",
"method": "get",
"responseData": {
"zidian": "$$$$",
"type": "2"
}
},
"body": [
{
"type": "mapping",
"name": "type",
"label": "映射",
"source": "$${zidian}"
}
]
}
占位文本
通过 placeholder 可以控制数据不存在时的展现
{
"type": "page",
"body": {
"type": "mapping",
"placeholder": "数据不存在",
"map": {
"1": "第一",
"2": "第二",
"3": "第三",
"*": "其他"
}
}
}
属性表
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| className | string |
外层 CSS 类名 | |
| placeholder | string |
占位文本 | |
| map | object或Array<object> |
映射配置 | |
| source | string or API |
API 或 数据映射 | |
| valueField | string |
value | 2.5.2 map或source为Array<object>时，用来匹配映射的字段名 |
| labelField | string |
label | 2.5.2 map或source为Array<object>时，用来展示的字段名注：配置后映射值无法作为 schema组件渲染 |
| itemSchema | string或SchemaNode |
2.5.2 自定义渲染模板，支持html或schemaNode；当映射值是 非object时，可使用${item}获取映射值；当映射值是 object时，可使用映射语法: ${xxx}获取object的值；也可使用数据映射语法： ${xxx}获取数据域中变量值。 |