amis2/docs/zh-CN/components/form/input-kvs.md

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'
                  }
                ]
              }

            ]
        }
    ]
}