TreeSelect 树形选择器

基本使用

```schema: scope=”body” { “type”: “form”, “api”: “/api/mock2/form/saveForm”, “body”: [ { “type”: “tree-select”, “name”: “tree”, “label”: “Tree”, “searchable”: 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 }, { “label”: “Folder E”, “children”: [ { “label”: “Folder G”, “children”: [ { “label”: “file H”, “value”: 6 }, { “label”: “file I”, “value”: 7 } ] } ] } ] } ] }

  1. ## 仅展示选中节点文本信息
  2. 设置`hideNodePathLabel: true`,可以隐藏选择框中已选择节点的祖先节点(ancestor)的`labelField`字段值,仅展示当前选中节点的`labelField`字段值。
  3. ```schema: scope="body"
  4. {
  5. "type": "form",
  6. "api": "/api/mock2/form/saveForm",
  7. "body": [
  8. {
  9. "type": "tree-select",
  10. "name": "tree1",
  11. "label": "展示已选择节点的祖先节点的文本信息",
  12. "value": "1,6,7",
  13. "multiple": true,
  14. "options": [
  15. {
  16. "label": "Folder A",
  17. "value": 1,
  18. "children": [
  19. {
  20. "label": "file A",
  21. "value": 2
  22. },
  23. {
  24. "label": "file B",
  25. "value": 3
  26. }
  27. ]
  28. },
  29. {
  30. "label": "file C",
  31. "value": 4
  32. },
  33. {
  34. "label": "file D",
  35. "value": 5
  36. },
  37. {
  38. "label": "Folder E",
  39. "children": [
  40. {
  41. "label": "Folder G",
  42. "children": [
  43. {
  44. "label": "file H",
  45. "value": 6
  46. },
  47. {
  48. "label": "file I",
  49. "value": 7
  50. }
  51. ]
  52. }
  53. ]
  54. }
  55. ]
  56. },
  57. {
  58. "type": "divider"
  59. },
  60. {
  61. "type": "tree-select",
  62. "name": "tree2",
  63. "label": "仅展示已选择节点的文本信息",
  64. "value": "1,6,7",
  65. "multiple": true,
  66. "hideNodePathLabel": true,
  67. "options": [
  68. {
  69. "label": "Folder A",
  70. "value": 1,
  71. "children": [
  72. {
  73. "label": "file A",
  74. "value": 2
  75. },
  76. {
  77. "label": "file B",
  78. "value": 3
  79. }
  80. ]
  81. },
  82. {
  83. "label": "file C",
  84. "value": 4
  85. },
  86. {
  87. "label": "file D",
  88. "value": 5
  89. },
  90. {
  91. "label": "Folder E",
  92. "children": [
  93. {
  94. "label": "Folder G",
  95. "children": [
  96. {
  97. "label": "file H",
  98. "value": 6
  99. },
  100. {
  101. "label": "file I",
  102. "value": 7
  103. }
  104. ]
  105. }
  106. ]
  107. }
  108. ]
  109. }
  110. ]
  111. }

只允许选择叶子节点

1.8.0 及以上版本

在单选时,可通过 onlyLeaf 可以配置只允许选择叶子节点

```schema: scope=”body” { “type”: “form”, “api”: “/api/mock2/form/saveForm”, “body”: [ { “type”: “tree-select”, “name”: “tree”, “label”: “Tree”, “onlyLeaf”: true, “searchable”: 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 }, { “label”: “Folder E”, “value”: “61”, “children”: [ { “label”: “Folder G”, “value”: “62”, “children”: [ { “label”: “file H”, “value”: 6 }, { “label”: “file I”, “value”: 7 } ] } ] } ] } ] }

  1. ## 如何让某些节点无法点?
  2. 只需要对应的节点没有 value 就行,比如下面例子的目录节点都无法点,只能点文件节点
  3. ```schema: scope="body"
  4. {
  5. "type": "form",
  6. "api": "/api/mock2/form/saveForm",
  7. "body": [
  8. {
  9. "type": "tree-select",
  10. "name": "tree",
  11. "label": "Tree",
  12. "searchable": true,
  13. "options": [
  14. {
  15. "label": "Folder A",
  16. "children": [
  17. {
  18. "label": "file A",
  19. "value": 2
  20. },
  21. {
  22. "label": "file B",
  23. "value": 3
  24. }
  25. ]
  26. },
  27. {
  28. "label": "Folder E",
  29. "children": [
  30. {
  31. "label": "Folder G",
  32. "children": [
  33. {
  34. "label": "file H",
  35. "value": 6
  36. },
  37. {
  38. "label": "file I",
  39. "value": 7
  40. }
  41. ]
  42. }
  43. ]
  44. }
  45. ]
  46. }
  47. ]
  48. }

属性表

更多用法,见 InputTree

属性名 类型 默认值 说明
hideNodePathLabel boolean false 是否隐藏选择框中已选择节点的路径 label 信息
onlyLeaf boolean false 只允许选择叶子节点

事件表

当前组件会对外派发以下事件,可以通过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 懒加载远程请求成功后返回的数据 懒加载接口远程请求成功时触发
blur event.data.value: string 选中值 输入框失去焦点时触发
focus event.data.value: string 选中值 输入框获取焦点时触发

动作表

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

动作名称 动作配置 说明
clear - 清空
reset - 将值重置为resetValue,若没有配置resetValue,则清空
setValue value: string 更新的值 更新数据,开启multiple,多值用,分隔