InputTree 树形选择框

基本使用

配置的options中，可以通过children字段进行嵌套展示，实现树形选择器

```schema: scope=”body” { “type”: “form”, “api”: “/api/mock2/form/saveForm”, “body”: [ { “type”: “input-tree”, “name”: “tree”, “label”: “Tree”, “options”: [ { “label”: “Folder A”, “value”: 1, “children”: [ { “label”: “file A”, “value”: 2 }, { “label”: “Folder B”, “value”: 3, “children”: [ { “label”: “file b1”, “value”: 3.1 }, { “label”: “file b2”, “value”: 3.2 } ] } ] }, { “label”: “file C”, “value”: 4 }, { “label”: “file D”, “value”: 5 } ] } ] }

  2. ## 选择器样式
  4. 配置`"type": "tree-select"`可以实现选择器样式
  6. ```schema: scope="body"
  7. {
  8.   "type": "form",
  9.   "api": "/api/mock2/form/saveForm",
  10.   "body": [
  11.     {
  12.       "type": "tree-select",
  13.       "name": "tree",
  14.       "label": "Tree",
  15.       "options": [
  16.         {
  17.           "label": "Folder A",
  18.           "value": 1,
  19.           "children": [
  20.             {
  21.               "label": "file A",
  22.               "value": 2
  23.             },
  24.             {
  25.               "label": "file B",
  26.               "value": 3
  27.             }
  28.           ]
  29.         },
  30.         {
  31.           "label": "file C",
  32.           "value": 4
  33.         },
  34.         {
  35.           "label": "file D",
  36.           "value": 5
  37.         }
  38.       ]
  39.     }
  40.   ]
  41. }

是否显示展开线

1.1.6 版本

通过 showOutline 来控制是否显示展开线。

```schema: scope=”body” { “type”: “form”, “api”: “/api/mock2/form/saveForm”, “body”: [ { “type”: “input-tree”, “name”: “tree”, “label”: “Tree”, “showOutline”: true, “options”: [ { “label”: “Folder A”, “value”: 1, “children”: [ { “label”: “file A”, “value”: 2 }, { “label”: “Folder B”, “value”: 3, “children”: [ { “label”: “file b1”, “value”: 3.1 }, { “label”: “file b2”, “value”: 3.2 } ] } ] }, { “label”: “file C”, “value”: 4 }, { “label”: “file D”, “value”: 5 } ] } ] }

  2. ## 选中父节点是否自动选中子节点
  4. > since 1.9.0
  6. `autoCheckChildren`默认为 true，选中父节点会自动选中子节点，可以设置`"autoCheckChildren": false`，不自动选中子节点
  8. ```schema: scope="body"
  9. {
  10.   "type": "form",
  11.   "debug": true,
  12.   "api": "/api/mock2/form/saveForm",
  13.   "body": [
  14.     {
  15.       "type": "input-tree",
  16.       "name": "tree1",
  17.       "label": "默认自动选中子节点",
  18.       "multiple": true,
  19.       "options": [
  20.         {
  21.           "label": "A",
  22.           "value": "a"
  23.         },
  24.         {
  25.           "label": "B",
  26.           "value": "b",
  27.           "children": [
  28.             {
  29.               "label": "B-1",
  30.               "value": "b-1"
  31.             },
  32.             {
  33.               "label": "B-2",
  34.               "value": "b-2"
  35.             },
  36.             {
  37.               "label": "B-3",
  38.               "value": "b-3"
  39.             }
  40.           ]
  41.         },
  42.         {
  43.           "label": "C",
  44.           "value": "c"
  45.         }
  46.       ]
  47.     },
  48.     {
  49.         "type": "divider"
  50.     },
  51.      {
  52.       "type": "input-tree",
  53.       "name": "tree2",
  54.       "label": "不自动选中子节点",
  55.       "multiple": true,
  56.       "autoCheckChildren": false,
  57.       "options": [
  58.         {
  59.           "label": "A",
  60.           "value": "a"
  61.         },
  62.         {
  63.           "label": "B",
  64.           "value": "b",
  65.           "children": [
  66.             {
  67.               "label": "B-1",
  68.               "value": "b-1"
  69.             },
  70.             {
  71.               "label": "B-2",
  72.               "value": "b-2"
  73.             },
  74.             {
  75.               "label": "B-3",
  76.               "value": "b-3"
  77.             }
  78.           ]
  79.         },
  80.         {
  81.           "label": "C",
  82.           "value": "c"
  83.         }
  84.       ]
  85.     }
  86.   ]
  87. }

选中父节点自动选中子节点，数据是否包含父子节点的值

cascade默认为 false，子节点禁止反选，值不包含子节点值，配置"cascade": true，子节点可以反选，值包含父子节点值（1.9.0 之前的版本 cascade 配置为 true 的效果为：选中父节点不默认选中子节点）

```schema: scope=”body” { “type”: “form”, “debug”: true, “api”: “/api/mock2/form/saveForm”, “body”: [ { “type”: “input-tree”, “name”: “tree1”, “label”: “默认子节点禁止反选，值不包含子节点值”, “multiple”: true, “options”: [ { “label”: “A”, “value”: “a” }, { “label”: “B”, “value”: “b”, “children”: [ { “label”: “B-1”, “value”: “b-1” }, { “label”: “B-2”, “value”: “b-2” }, { “label”: “B-3”, “value”: “b-3” } ] }, { “label”: “C”, “value”: “c” } ] }, { “type”: “divider” }, { “type”: “input-tree”, “name”: “tree2”, “label”: “子节点可以反选，值包含父子节点值”, “multiple”: true, “cascade”: true, “options”: [ { “label”: “A”, “value”: “a” }, { “label”: “B”, “value”: “b”, “children”: [ { “label”: “B-1”, “value”: “b-1” }, { “label”: “B-2”, “value”: “b-2” }, { “label”: “B-3”, “value”: “b-3” } ] }, { “label”: “C”, “value”: “c” } ] } ] }

  2. `withChildren`默认为 false，子节点禁止反选，值包含父子节点值，配置`withChildren": true`，子节点禁止反选，值包含父子节点值
  4. ```schema: scope="body"
  5. {
  6.   "type": "form",
  7.   "debug": true,
  8.   "api": "/api/mock2/form/saveForm",
  9.   "body": [
  10.     {
  11.       "type": "input-tree",
  12.       "name": "tree1",
  13.       "label": "默认不包含子节点的值",
  14.       "multiple": true,
  15.       "options": [
  16.         {
  17.           "label": "A",
  18.           "value": "a"
  19.         },
  20.         {
  21.           "label": "B",
  22.           "value": "b",
  23.           "children": [
  24.             {
  25.               "label": "B-1",
  26.               "value": "b-1"
  27.             },
  28.             {
  29.               "label": "B-2",
  30.               "value": "b-2"
  31.             },
  32.             {
  33.               "label": "B-3",
  34.               "value": "b-3"
  35.             }
  36.           ]
  37.         },
  38.         {
  39.           "label": "C",
  40.           "value": "c"
  41.         }
  42.       ]
  43.     },
  44.     {
  45.         "type": "divider"
  46.     },
  47.      {
  48.       "type": "input-tree",
  49.       "name": "tree2",
  50.       "label": "自动带上子节点的值",
  51.       "multiple": true,
  52.       "withChildren": true,
  53.       "options": [
  54.         {
  55.           "label": "A",
  56.           "value": "a"
  57.         },
  58.         {
  59.           "label": "B",
  60.           "value": "b",
  61.           "children": [
  62.             {
  63.               "label": "B-1",
  64.               "value": "b-1"
  65.             },
  66.             {
  67.               "label": "B-2",
  68.               "value": "b-2"
  69.             },
  70.             {
  71.               "label": "B-3",
  72.               "value": "b-3"
  73.             }
  74.           ]
  75.         },
  76.         {
  77.           "label": "C",
  78.           "value": "c"
  79.         }
  80.       ]
  81.     }
  82.   ]
  83. }

也可以设置onlyChildren，实现只包含子节点的值

```schema: scope=”body” { “type”: “form”, “debug”: true, “api”: “/api/mock2/form/saveForm”, “body”: [ { “type”: “input-tree”, “name”: “tree1”, “label”: “默认不包含子节点的值”, “multiple”: true, “options”: [ { “label”: “A”, “value”: “a” }, { “label”: “B”, “value”: “b”, “children”: [ { “label”: “B-1”, “value”: “b-1” }, { “label”: “B-2”, “value”: “b-2” }, { “label”: “B-3”, “value”: “b-3” } ] }, { “label”: “C”, “value”: “c” } ] }, { “type”: “divider” }, { “type”: “input-tree”, “name”: “tree2”, “label”: “只包含子节点的值”, “multiple”: true, “onlyChildren”: true, “options”: [ { “label”: “A”, “value”: “a” }, { “label”: “B”, “value”: “b”, “children”: [ { “label”: “B-1”, “value”: “b-1” }, { “label”: “B-2”, “value”: “b-2” }, { “label”: “B-3”, “value”: “b-3” } ] }, { “label”: “C”, “value”: “c” } ] } ] }

  2. ## 只允许选择叶子节点
  4. > 1.10.0 及以上版本
  6. 在单选时，可通过 `onlyLeaf` 可以配置只允许选择叶子节点
  8. ```schema: scope="body"
  9. {
  10.   "type": "form",
  11.   "api": "/api/mock2/form/saveForm",
  12.   "body": [
  13.     {
  14.       "type": "input-tree",
  15.       "name": "tree",
  16.       "label": "Tree",
  17.       "onlyLeaf": true,
  18.       "searchable": true,
  19.       "options": [
  20.         {
  21.           "label": "Folder A",
  22.           "value": 1,
  23.           "children": [
  24.             {
  25.               "label": "file A",
  26.               "value": 2
  27.             },
  28.             {
  29.               "label": "file B",
  30.               "value": 3
  31.             }
  32.           ]
  33.         },
  34.         {
  35.           "label": "file C",
  36.           "value": 4
  37.         },
  38.         {
  39.           "label": "file D",
  40.           "value": 5
  41.         },
  42.         {
  43.           "label": "Folder E",
  44.           "value": "61",
  45.           "children": [
  46.             {
  47.               "label": "Folder G",
  48.               "value": "62",
  49.               "children": [
  50.                 {
  51.                   "label": "file H",
  52.                   "value": 6
  53.                 },
  54.                 {
  55.                   "label": "file I",
  56.                   "value": 7
  57.                 }
  58.               ]
  59.             }
  60.           ]
  61.         }
  62.       ]
  63.     }
  64.   ]
  65. }

默认展开

默认是展开所有子节点的，如果不想默认展开，则配置"initiallyOpen": false

```schema: scope=”body” { “type”: “form”, “debug”: true, “api”: “/api/mock2/form/saveForm”, “body”: [ { “type”: “input-tree”, “name”: “tree1”, “label”: “默认不自动带上子节点的值”, “initiallyOpen”: false, “options”: [ { “label”: “A”, “value”: “a” }, { “label”: “B”, “value”: “b”, “children”: [ { “label”: “B-1”, “value”: “b-1” }, { “label”: “B-2”, “value”: “b-2” }, { “label”: “B-3”, “value”: “b-3” } ] }, { “label”: “C”, “value”: “c” } ] } ] }

  2. 如果层级较多，也可以配置`unfoldedLevel`指定展开的层级数，默认展开第 1 层
  4. 下例中设置`"unfoldedLevel": 2`，表示展开第 2 层
  6. ```schema: scope="body"
  7. {
  8.   "type": "form",
  9.   "debug": true,
  10.   "api": "/api/mock2/form/saveForm",
  11.   "body": [
  12.     {
  13.       "type": "input-tree",
  14.       "name": "tree1",
  15.       "label": "默认不自动带上子节点的值",
  16.       "initiallyOpen": false,
  17.       "unfoldedLevel": 2,
  18.       "options": [
  19.         {
  20.           "label": "A",
  21.           "value": "a"
  22.         },
  23.         {
  24.           "label": "B",
  25.           "value": "b",
  26.           "children": [
  27.             {
  28.               "label": "B-1",
  29.               "value": "b-1"
  30.             },
  31.             {
  32.               "label": "B-2",
  33.               "value": "b-2",
  34.               "children": [
  35.                 {
  36.                     "label": "B-2-1",
  37.                     "value": "b-2-1"
  38.                 },
  39.                 {
  40.                     "label": "B-2-2",
  41.                     "value": "b-2-2"
  42.                 },
  43.                 {
  44.                     "label": "B-2-3",
  45.                     "value": "b-2-3"
  46.                 }
  47.             ]
  48.             },
  49.             {
  50.               "label": "B-3",
  51.               "value": "b-3"
  52.             }
  53.           ]
  54.         },
  55.         {
  56.           "label": "C",
  57.           "value": "c"
  58.         }
  59.       ]
  60.     }
  61.   ]
  62. }

可编辑

配置 creatable、removable 和 editable 可以实现树可编辑。

```schema: scope=”body” { “type”: “form”, “api”: “/api/mock2/form/saveForm”, “body”: [ { “type”: “input-tree”, “name”: “tree”, “label”: “Tree”, “creatable”: true, “removable”: true, “editable”: true, “options”: [ { “label”: “Folder A”, “value”: 1, “children”: [ { “label”: “file A”, “value”: 2 }, { “label”: “file B”, “value”: 3 } ] }, { “label”: “file C”, “value”: 4 }, { “label”: “file D”, “value”: 5 } ] } ] }

  2. ## 控制哪些项可编辑
  4. 配置 `creatable`、`removable` 和 `editable` 可以实现树可编辑，同时如果需要关闭部分节点的编辑权限，可以在节点上配置`creatable`、`removable` 和 `editable`。
  6. `rootCreatable` 可以用来关闭顶层是否可以创建。如果想要控制顶层可编辑，请配置 `hideRoot`，用节点来控制。
  8. ```schema: scope="body"
  9. {
  10.   "type": "form",
  11.   "api": "/api/mock2/form/saveForm",
  12.   "body": [
  13.     {
  14.       "type": "input-tree",
  15.       "name": "tree",
  16.       "label": "Tree",
  17.       "creatable": true,
  18.       "removable": true,
  19.       "editable": true,
  20.       "rootCreatable": false,
  21.       "options": [
  22.         {
  23.           "label": "Folder A",
  24.           "value": 1,
  25.           "creatable": false,
  26.           "removable": false,
  27.           "editable": false,
  28.           "children": [
  29.             {
  30.               "label": "file A",
  31.               "value": 2
  32.             },
  33.             {
  34.               "label": "file B",
  35.               "value": 3
  36.             }
  37.           ]
  38.         },
  39.         {
  40.           "label": "file C",
  41.           "value": 4,
  42.           "removable": false
  43.         },
  44.         {
  45.           "label": "file D",
  46.           "value": 5,
  47.           "editable": false
  48.         }
  49.       ]
  50.     }
  51.   ]
  52. }

控制添加/编辑的表单

配置 addControls 可以控制添加时需要填写哪些信息，同样还有 editControls 来配置编辑节点的表单

```schema: scope=”body” { “type”: “form”, “api”: “/api/mock2/form/saveForm”, “body”: [ { “type”: “input-tree”, “name”: “tree”, “label”: “Tree”, “creatable”: true, “addControls”: [ { “label”: “节点名称”, “type”: “input-text”, “required”: true, “name”: “label” }, { “label”: “节点值”, “type”: “input-text”, “required”: true, “name”: “value” } ], “options”: [ { “label”: “Folder A”, “value”: 1, “children”: [ { “label”: “file A”, “value”: 2 }, { “label”: “file B”, “value”: 3 } ] }, { “label”: “file C”, “value”: 4 }, { “label”: “file D”, “value”: 5 } ] } ] }

  2. ## 懒加载
  4. > since 1.1.6
  6. 需要懒加载的选项请配置 `defer` 为 true，然后配置 `deferApi` 即可完成懒加载。如果不配置 `deferApi` 会使用 `source` 接口。
  7. `deferApi` 中可以用到当前选项中的任何字段，比如以下这个例子是把 label 传给了 defer 接口
  9. ```schema: scope="body"
  10. {
  11.   "type": "form",
  12.   "api": "/api/mock2/form/saveForm",
  13.   "body": [
  14.     {
  15.       "type": "input-tree",
  16.       "name": "tree",
  17.       "label": "Tree",
  18.       "deferApi": "/api/mock2/form/deferOptions?label=${label}&waitSeconds=2",
  19.       "options": [
  20.         {
  21.           "label": "Folder A",
  22.           "value": 1,
  23.           "collapsed": true,
  24.           "children": [
  25.             {
  26.               "label": "file A",
  27.               "value": 2
  28.             },
  29.             {
  30.               "label": "file B",
  31.               "value": 3
  32.             }
  33.           ]
  34.         },
  35.         {
  36.           "label": "这下面是懒加载的",
  37.           "value": 4,
  38.           "defer": true
  39.         },
  40.         {
  41.           "label": "file D",
  42.           "value": 5
  43.         }
  44.       ]
  45.     }
  46.   ]
  47. }

节点路径模式

since 1.2.4

配置enableNodePath: true后, 可以将value格式转换成节点路径模式，pathSeparator设置路径分隔符，建议将该属性的值和拼接符delimiter区分开。节点路径模式下，value中所有节点的父节点都会自动加载数据并回显。不同配置属性的节点路径模式value如下:

  1.     a
  2.    / \
  3.   b   d
  4.  /
  5. c
  6. ----------------------------------------------
  7. multiple  joinValues  extractValue  value
  8. ----------------------------------------------
  9. false       true           -        'a/b/c'
  10. false       false        false      {label: 'A/B/C', value: 'a/b/c'}
  11. true        true           -        'a/b/c,a/d'
  12. true        false        true       ['a/b/c', 'a/d']
  13. true        false        true       [{label: 'A/B/C', value: 'a/b/c'},{label: 'A/D', value: 'a/d'}]

schema: scope="body" { "type": "form", "api": "/api/mock2/form/saveForm", "body": [ { "type": "input-tree", "name": "tree", "label": "Tree", "deferApi": "/api/mock2/form/deferOptions?label=${label}&waitSeconds=2", "value": "1/2,4/lazy-1/lazy-1-3,4/lazy-1/lazy-1-5", "enableNodePath": true, "pathSeparator": '/', "multiple": true, "options": [ { "label": "Folder A", "value": 1, "collapsed": true, "children": [ { "label": "file A", "value": 2 }, { "label": "file B", "value": 3 } ] }, { "label": "这下面是懒加载的", "value": 4, "defer": true }, { "label": "file D", "value": 5 } ] } ] }

属性表

当做选择器表单项使用时，除了支持 普通表单项属性表 中的配置以外，还支持下面一些配置

属性名 类型 默认值 说明
options Array<object>或Array<string> 选项组
source string或 API 动态选项组
autoComplete API 自动提示补全
multiple boolean false 是否多选
delimiter string false 拼接符
labelField string "label" 选项标签字段
valueField string "value" 选项值字段
iconField string "icon" 图标值字段
joinValues boolean true 拼接值
extractValue boolean false 提取值
creatable boolean false 新增选项
addControls Array<表单项> 自定义新增表单项
addApi API 配置新增选项接口
editable boolean false 编辑选项
editControls Array<表单项> 自定义编辑表单项
editApi API 配置编辑选项接口
removable boolean false 删除选项
deleteApi API 配置删除选项接口
searchable boolean false 是否可检索，仅在 type 为 tree-select 的时候生效
hideRoot boolean true 如果想要显示个顶级节点，请设置为 false
rootLabel boolean "顶级" 当 hideRoot 不为 false 时有用，用来设置顶级节点的文字。
showIcon boolean true 是否显示图标
showRadio boolean false 是否显示单选按钮，multiple 为 false 是有效。
showOutline boolean false 是否显示树层级展开线
initiallyOpen boolean true 设置是否默认展开所有层级。
unfoldedLevel number 1 设置默认展开的级数，只有initiallyOpen不是true时生效。
autoCheckChildren boolean true 当选中父节点时级联选择子节点。
cascade boolean false autoCheckChildren 为 true 时生效；默认行为：子节点禁用，值只包含父节点值；设置为 true 时，子节点可反选，值包含父子节点值。
withChildren boolean false cascade 为 false 时生效，选中父节点时，值里面将包含父子节点的值，否则只会保留父节点的值。
onlyChildren boolean false autoCheckChildren 为 true 时生效，不受 cascade 影响；onlyChildren 为 true，ui 行为级联选中子节点，子节点可反选，值只包含子节点的值。
onlyLeaf boolean false 只允许选择叶子节点
rootCreatable boolean false 是否可以创建顶级节点
rootCreateTip string "添加一级节点" 创建顶级节点的悬浮提示
minLength number 最少选中的节点数
maxLength number 最多选中的节点数
treeContainerClassName string tree 最外层容器类名
enableNodePath boolean false 是否开启节点路径模式
pathSeparator string / 节点路径的分隔符，enableNodePath为true时生效
highlightTxt string 标签中需要高亮的字符，支持变量

事件表

当前组件会对外派发以下事件，可以通过onEvent来监听这些事件，并通过actions来配置执行的动作，在actions中可以通过event.data.xxx事件参数变量来获取事件产生的数据，详细请查看事件动作。

事件名称 事件参数 说明
change event.data.value: string 选中节点的值 选中值变化时触发
add event.data.options: Option[] 选项集合
event.data.value: Option 新增的节点信息		 新增节点提交时触发
edit event.data.options: Option[] 选项集合
event.data.value: Option 编辑的节点信息		 编辑节点提交时触发
delete event.data.options: Option[] 选项集合
event.data.value: Option 删除的节点信息		 删除节点提交时触发
loadFinished event.data.value: object deferApi 懒加载远程请求成功后返回的数据 懒加载接口远程请求成功时触发

动作表

当前组件对外暴露以下特性动作，其他组件可以通过指定actionType: 动作名称、componentId: 该组件id来触发这些动作，动作配置可以通过args: {动作配置项名称: xxx}来配置具体的参数，详细请查看事件动作。

动作名称 动作配置 说明
expand openLevel: number 展开指定层级
collapse - 收起
clear - 清空
reset - 将值重置为resetValue，若没有配置resetValue，则清空
setValue value: string 更新的值 更新数据，开启multiple，多值用,分隔