开发指南
何时使用
文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。
基本
最简单的用法，展示可展开，可选中，可勾选，可编辑，可右键，禁用，禁用勾选，默认展开，默认选中，默认勾选等功能。
使用数据直接生成
使用 dataSource 生成树结构，除设置 key, label, children 属性外，还可传入 TreeNode 的其他属性，包括 selectable，disabled，checkable, checkboxDisabled, isLeaf 等。
带线样式
展示 Tree 组件带线的样式外观。
父子节点选中是否关联
展示父子节点选中是否关联的用法。
可搜索的树
展示可搜索的树。
异步加载数据
点击展开节点，动态加载数据。
拖动
将节点拖拽到其他节点内部或前后。
API
Tree
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| children | 树节点 | ReactNode | - |
| dataSource | 数据源，该属性优先级高于 children | Array | - |
| showLine | 是否显示树的线 | Boolean | false |
| selectable | 是否支持选中节点 | Boolean | true |
| selectedKeys | （用于受控）当前选中节点 key 的数组 | Array<String> | - |
| defaultSelectedKeys | （用于非受控）默认选中节点 key 的数组 | Array<String> | [] |
| onSelect | 选中或取消选中节点时触发的回调函数 签名: Function(selectedKeys: Array, extra: Object) => void 参数: selectedKeys: {Array} 选中节点key的数组 extra: {Object} 额外参数 extra.selectedNodes: {Array} 选中节点的数组 extra.node: {Object} 当前操作的节点 extra.selected: {Boolean} 当前操作是否是选中 | Function | func.noop |
| multiple | 是否支持多选 | Boolean | false |
| checkable | 是否支持勾选节点的复选框 | Boolean | false |
| checkedKeys | （用于受控）当前勾选复选框节点 key 的数组或 {checked: Array, indeterminate: Array} 的对象 | Array<String>/Object | - |
| defaultCheckedKeys | （用于非受控）默认勾选复选框节点 key 的数组 | Array<String> | [] |
| checkStrictly | 勾选节点复选框是否完全受控（父子节点选中状态不再关联） | Boolean | false |
| checkedStrategy | 定义选中时回填的方式 可选值: 'all'(返回所有选中的节点) 'parent'(父子节点都选中时只返回父节点) 'child'(父子节点都选中时只返回子节点) | Enum | 'all' |
| onCheck | 勾选或取消勾选复选框时触发的回调函数 签名: Function(checkedKeys: Array, extra: Object) => void 参数: checkedKeys: {Array} 勾选复选框节点key的数组 extra: {Object} 额外参数 extra.checkedNodes: {Array} 勾选复选框节点的数组 extra.checkedNodesPositions: {Array} 包含有勾选复选框节点和其位置的对象的数组 extra.indeterminateKeys: {Array} 半选复选框节点 key 的数组 extra.node: {Object} 当前操作的节点 extra.checked: {Boolean} 当前操作是否是勾选 | Function | func.noop |
| expandedKeys | （用于受控）当前展开的节点 key 的数组 | Array<String> | - |
| defaultExpandedKeys | （用于非受控）默认展开的节点 key 的数组 | Array<String> | [] |
| defaultExpandAll | 是否默认展开所有节点 | Boolean | false |
| autoExpandParent | 是否自动展开父节点 | Boolean | true |
| onExpand | 展开或收起节点时触发的回调函数 签名: Function(expandedKeys: Array, extra: Object) => void 参数: expandedKeys: {Array} 展开的节点key的数组 extra: {Object} 额外参数 extra.node: {Object} 当前操作的节点 extra.expanded: {Boolean} 当前操作是否是展开 | Function | func.noop |
| editable | 是否支持编辑节点内容 | Boolean | false |
| onEditFinish | 编辑节点内容完成时触发的回调函数 签名: Function(key: String, label: String, node: Object) => void 参数: key: {String} 编辑节点的 key label: {String} 编辑节点完成时节点的文本 node: {Object} 当前编辑的节点 | Function | func.noop |
| draggable | 是否支持拖拽节点 | Boolean | false |
| onDragStart | 开始拖拽节点时触发的回调函数 签名: Function(info: Object) => void 参数: info: {Object} 拖拽信息 info.event: {Object} 事件对象 info.node: {Object} 拖拽的节点 | Function | func.noop |
| onDragEnter | 拖拽节点进入目标节点时触发的回调函数 签名: Function(info: Object) => void 参数: info: {Object} 拖拽信息 info.event: {Object} 事件对象 info.node: {Object} 目标节点 info.expandedKeys: {Array} 当前展开的节点key的数组 | Function | func.noop |
| onDragOver | 拖拽节点在目标节点上移动的时候触发的回调函数 签名: Function(info: Object) => void 参数: info: {Object} 拖拽信息 info.event: {Object} 事件对象 info.node: {Object} 目标节点 | Function | func.noop |
| onDragLeave | 拖拽节点离开目标节点时触发的回调函数 签名: Function(info: Object) => void 参数: info: {Object} 拖拽信息 info.event: {Object} 事件对象 info.node: {Object} 目标节点 | Function | func.noop |
| onDragEnd | 拖拽节点拖拽结束时触发的回调函数 签名: Function(info: Object) => void 参数: info: {Object} 拖拽信息 info.event: {Object} 事件对象 info.node: {Object} 目标节点 | Function | func.noop |
| onDrop | 拖拽节点放入目标节点内或前后触发的回调函数 签名: Function(info: Object) => void 参数: info: {Object} 拖拽信息 info.event: {Object} 事件对象 info.node: {Object} 目标节点 info.dragNode: {Object} 拖拽的节点 info.dragNodesKeys: {Array} 拖拽的节点和其子节点 key 的数组 info.dropPosition: {Number} 放置位置，-1代表当前节点前，0代表当前节点里，1代表当前节点后 | Function | func.noop |
| canDrop | 节点是否可被作为拖拽的目标节点 签名: Function(info: Object) => Boolean 参数: info: {Object} 拖拽信息 info.node: {Object} 目标节点 info.dragNode: {Object} 拖拽的节点 info.dragNodesKeys: {Array} 拖拽的节点和其子节点 key 的数组 info.dropPosition: {Number} 放置位置，-1代表当前节点前，0代表当前节点里，1代表当前节点后 返回值: {Boolean} 是否可以被当作目标节点 | Function | () => true |
| loadData | 异步加载数据的函数 签名: Function(node: Object) => void 参数: node: {Object} 被点击展开的节点 | Function | - |
| filterTreeNode | 按需筛选高亮节点 签名: Function(node: Object) => Boolean 参数: node: {Object} 待筛选的节点 返回值: {Boolean} 是否被筛选中 | Function | - |
| onRightClick | 右键点击节点时触发的回调函数 签名: Function(info: Object) => void 参数: info: {Object} 信息对象 info.event: {Object} 事件对象 info.node: {Object} 点击的节点 | Function | func.noop |
| isLabelBlock | 设置节点是否占满剩余空间，一般用于统一在各节点右侧添加元素(借助 flex 实现，暂时只支持 ie10+) | Boolean | false |
| isNodeBlock | 设置节点是否占满一行 | Boolean/Object | false |
| animation | 是否开启展开收起动画 | Boolean | true |
| focusedKey | 当前获得焦点的子菜单或菜单项 key 值 | String | - |
Tree.Node
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| children | 树节点 | ReactNode | - |
| label | 节点文本内容 | ReactNode | '---' |
| selectable | 单独设置是否支持选中，覆盖 Tree 的 selectable | Boolean | - |
| checkable | 单独设置是否出现复选框，覆盖 Tree 的 checkable | Boolean | - |
| editable | 单独设置是否支持编辑，覆盖 Tree 的 editable | Boolean | - |
| draggable | 单独设置是否支持拖拽，覆盖 Tree 的 draggable | Boolean | - |
| disabled | 是否禁止节点响应 | Boolean | false |
| checkboxDisabled | 是否禁止勾选节点复选框 | Boolean | false |
| isLeaf | 是否是叶子节点，设置loadData时生效 | Boolean | false |
可以为 Tree.Node 设置 key 值：<TreeNode key="102894" label="女装" />，一般为数据的 id 值，但必需保证其全局唯一性，key 的默认值为 Tree 内部计算出的位置字符串。