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 } ] } ] } ] } ] }
## 仅展示选中节点文本信息设置`hideNodePathLabel: true`,可以隐藏选择框中已选择节点的祖先节点(ancestor)的`labelField`字段值,仅展示当前选中节点的`labelField`字段值。```schema: scope="body"{"type": "form","api": "/api/mock2/form/saveForm","body": [{"type": "tree-select","name": "tree1","label": "展示已选择节点的祖先节点的文本信息","value": "1,6,7","multiple": 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}]}]}]},{"type": "divider"},{"type": "tree-select","name": "tree2","label": "仅展示已选择节点的文本信息","value": "1,6,7","multiple": true,"hideNodePathLabel": 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.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 } ] } ] } ] } ] }
## 如何让某些节点无法点?只需要对应的节点没有 value 就行,比如下面例子的目录节点都无法点,只能点文件节点```schema: scope="body"{"type": "form","api": "/api/mock2/form/saveForm","body": [{"type": "tree-select","name": "tree","label": "Tree","searchable": true,"options": [{"label": "Folder A","children": [{"label": "file A","value": 2},{"label": "file B","value": 3}]},{"label": "Folder E","children": [{"label": "Folder G","children": [{"label": "file H","value": 6},{"label": "file I","value": 7}]}]}]}]}
属性表
更多用法,见 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,多值用,分隔 |
