InputSubForm 子表单

基本用法

```schema: scope=”body” { “type”: “form”, “debug”: true, “body”: [ { “type”: “input-sub-form”, “name”: “form”, “label”: “子Form”, “btnLabel”: “设置子表单”, “form”: { “title”: “配置子表单”, “body”: [ { “name”: “a”, “label”: “A”, “type”: “input-text” },

  1.         {
  2.           "name": "b",
  3.           "label": "B",
  4.           "type": "input-text"
  5.         }
  6.       ]
  7.     }
  8.   }
  9. ]

}

  2. ## 多选模式
  4. 可以配置`"multiple": true`，实现多选模式
  6. ```schema: scope="body"
  7. {
  8.   "type": "form",
  9.   "debug": true,
  10.   "body": [
  11.       {
  12.         "type": "input-sub-form",
  13.         "name": "form2",
  14.         "label": "多选",
  15.         "multiple": true,
  16.         "maxLength": 3,
  17.         "form": {
  18.           "title": "配置子表单",
  19.           "body": [
  20.             {
  21.               "name": "a",
  22.               "label": "A",
  23.               "type": "input-text"
  24.             },
  25.             {
  26.               "name": "b",
  27.               "label": "B",
  28.               "type": "input-text"
  29.             }
  30.           ]
  31.         }
  32.       }
  33.     ]
  34. }

设置按钮名称

```schema: scope=”body” { “type”: “form”, “debug”: true, “body”: [ { “type”: “input-sub-form”, “name”: “form2”, “label”: “多选”, “multiple”: true, “btnLabel”: “设置${title}”, “form”: { “title”: “配置子表单”, “body”: [ { “name”: “title”, “label”: “标题”, “required”: true, “type”: “input-text” }, { “name”: “b”, “label”: “其他”, “type”: “input-text” } ] } } ] }

  2. ## 支持拖拽
  4. ```schema: scope="body"
  5. {
  6.   "type": "form",
  7.   "debug": true,
  8.   "body": [
  9.     {
  10.       "type": "input-sub-form",
  11.       "name": "form2",
  12.       "label": "多选",
  13.       "multiple": true,
  14.       "btnLabel": "设置${title}",
  15.       "draggable": true,
  16.       "addable": false,
  17.       "removable": false,
  18.       "value": [
  19.         {
  20.           "title": "a"
  21.         },
  22.         {
  23.           "title": "b"
  24.         },
  25.         {
  26.           "title": "c"
  27.         },
  28.         {
  29.           "title": "d"
  30.         }
  31.       ],
  32.       "form": {
  33.         "title": "配置子表单",
  34.         "body": [
  35.           {
  36.             "name": "title",
  37.             "label": "标题",
  38.             "required": true,
  39.             "type": "input-text"
  40.           },
  41.           {
  42.             "name": "b",
  43.             "label": "其他",
  44.             "type": "input-text"
  45.           }
  46.         ]
  47.       }
  48.     }
  49.   ]
  50. }

属性表

除了支持 普通表单项属性表 中的配置以外，还支持下面一些配置

属性名 类型 默认值 说明
multiple boolean false 是否为多选模式
labelField string 当值中存在这个字段，则按钮名称将使用此字段的值来展示。
btnLabel string "设置" 按钮默认名称
minLength number 0 限制最小个数。
maxLength number 0 限制最大个数。
draggable boolean 是否可拖拽排序
addable boolean 是否可新增
removable boolean 是否可删除
addButtonClassName string `` 新增按钮 CSS 类名
itemClassName string `` 值元素 CSS 类名
itemsClassName string `` 值包裹元素 CSS 类名
form Form 子表单配置，同 Form
addButtonText string `` 自定义新增一项的文本
showErrorMsg boolean true 是否在左下角显示报错信息