mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-06 05:58:25 +08:00
8.3 KiB
8.3 KiB
title | description | type | group | menuName | icon | order |
---|---|---|---|---|---|---|
InputKVS 键值对象 | 0 | null | InputKVS | 15 |
2.1.0 及以上版本
这个组件的功能和 input-kv
类似,input-kv
的 value 值只支持一个对象,input-kvs
的最大不同就是 value 支持对象和数组,可以用来支持深层结构编辑
基本用法
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"debug": true,
"body": [
{
"type": "input-kvs",
"name": "field",
"addButtonText": "新增字段",
"keyItem": {
"label": "字段名"
},
"valueItems": [
{
"type": "switch",
"name": "primary",
"label": "是否是主键"
},
{
"type": "select",
"name": "type",
"label": "字段类型",
"options": [
"text",
"int",
"float"
]
}
]
}
]
}
其中 keyItem
可以用来修改 key 值控件,比如可以改成下拉框
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"debug": true,
"body": [
{
"type": "input-kvs",
"name": "field",
"addButtonText": "新增字段",
"keyItem": {
"label": "字段名",
"type": "select",
"options": [
"id",
"title",
"content"
]
},
"valueItems": [
{
"type": "switch",
"name": "primary",
"label": "是否是主键"
},
{
"type": "select",
"name": "type",
"label": "字段类型",
"options": [
"text",
"int",
"float"
]
}
]
}
]
}
而 valueItems
是用来控制值的控件,这里的配置和 combo 的 items 一样,唯一限制是不允许有 "name": "_key"
值的情况,因为这个值被当成对象 key 了。
水平模式
通过 "mode": "horizontal"
设置,需要分别在 keyItem
和 valueItems
里设置
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"debug": true,
"body": [
{
"type": "input-kvs",
"name": "field",
"addButtonText": "新增字段",
"keyItem": {
"label": "字段名",
"mode": "horizontal"
},
"valueItems": [
{
"type": "switch",
"name": "primary",
"mode": "horizontal",
"label": "是否是主键"
},
{
"type": "select",
"name": "type",
"label": "字段类型",
"mode": "horizontal",
"options": [
"text",
"int",
"float"
]
}
]
}
]
}
嵌套的场景
valueItems
可以进一步嵌套,比如里面又嵌一个 input-kvs
实现深层结构编辑
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"debug": true,
"body": [
{
"type": "input-kvs",
"name": "dataModel",
"addButtonText": "新增表",
"keyItem": {
"label": "表名",
"mode": "horizontal",
"type": "select",
"options": [
"table1",
"table2",
"table3"
]
},
"valueItems": [
{
"type": "input-kvs",
"addButtonText": "新增字段",
"name": "column",
"keyItem": {
"label": "字段名",
"mode": "horizontal",
"type": "select",
"options": [
"id",
"title",
"content"
]
},
"valueItems": [
{
"type": "switch",
"name": "primary",
"mode": "horizontal",
"label": "是否是主键"
},
{
"type": "select",
"name": "type",
"label": "字段类型",
"mode": "horizontal",
"options": [
"text",
"int",
"float"
]
}
]
}
]
}
]
}
前面的嵌套会多一个层级,如果想去掉这个层级 column
,可以将 "name": "column"
改成 "name": "_value"
,这时值就会直接放入
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"debug": true,
"body": [
{
"type": "input-kvs",
"name": "dataModel",
"addButtonText": "新增表",
"keyItem": {
"label": "表名",
"mode": "horizontal",
"type": "select",
"options": [
"table1",
"table2",
"table3"
]
},
"valueItems": [
{
"type": "input-kvs",
"addButtonText": "新增字段",
"name": "_value",
"keyItem": {
"label": "字段名",
"mode": "horizontal",
"type": "select",
"options": [
"id",
"title",
"content"
]
},
"valueItems": [
{
"type": "switch",
"name": "primary",
"mode": "horizontal",
"label": "是否是主键"
},
{
"type": "select",
"name": "type",
"label": "字段类型",
"mode": "horizontal",
"options": [
"text",
"int",
"float"
]
}
]
}
]
}
]
}
除了前面的对象,值也可以是数组,需要配置一下 valueIsArray
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"debug": true,
"body": [
{
"type": "input-kvs",
"name": "dataModel",
"addButtonText": "新增表",
"valueIsArray": true,
"keyItem": {
"label": "表名",
"mode": "horizontal",
"type": "select",
"options": [
"table1",
"table2",
"table3"
]
},
"valueItems": [
{
type: 'checkboxes',
name: '_value',
joinValues: false,
extractValue: true,
options: [
{
label: '查询',
value: 'select'
},
{
label: '写入',
value: 'insert'
},
{
label: '更新',
value: 'update'
},
{
label: '删除',
value: 'delete'
}
]
}
]
}
]
}