# @beisen-phoenix/base-tree > --- Latest version **3.3.55** (published 2019-11-25) · 0 weekly downloads ## Install ```sh npm install @beisen-phoenix/base-tree pnpm add @beisen-phoenix/base-tree yarn add @beisen-phoenix/base-tree bun add @beisen-phoenix/base-tree ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 3.3.55 | | Published | 2019-11-25 | | First published | 2019-04-30 | | Weekly downloads | 0 | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 9 | | Unpacked size | 277.8 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | beisencorp | ## Links - npm: https://www.npmjs.com/package/@beisen-phoenix/base-tree - npm.io page: https://npm.io/package/@beisen-phoenix/base-tree ## Dependencies (9) - [rc-util](https://npm.io/package/rc-util.md) ^4.5.1 - [warning](https://npm.io/package/warning.md) ^3.0.0 - [classnames](https://npm.io/package/classnames.md) 2.x - [prop-types](https://npm.io/package/prop-types.md) ^15.5.8 - [rc-animate](https://npm.io/package/rc-animate.md) 2.6.0 - [@beisen-phoenix/icon](https://npm.io/package/@beisen-phoenix/icon.md) ^3.2.54 - [@beisen/webpack-config](https://npm.io/package/@beisen/webpack-config.md) ^1.0.6 - [react-lifecycles-compat](https://npm.io/package/react-lifecycles-compat.md) ^3.0.4 - [@beisen-phoenix/style-token](https://npm.io/package/@beisen-phoenix/style-token.md) ^3.3.55 ## Recent versions - 3.3.55 (latest) — 2019-11-25 - 3.2.44-rc.1 (rc) — 2019-10-24 - 3.3.53 — 2019-11-25 - 3.3.51 — 2019-11-23 - 3.3.48 — 2019-11-22 - 3.3.47 — 2019-11-22 - 3.3.46 — 2019-11-22 - 3.3.45 — 2019-11-21 - 3.3.43 — 2019-11-21 - 3.3.42 — 2019-11-21 - 3.3.41-beta.1 — 2019-11-21 - 3.3.41 — 2019-11-21 - 3.3.39 — 2019-11-20 - 3.3.38 — 2019-11-20 - 3.3.37 — 2019-11-19 - … 345 more at https://npm.io/package/@beisen-phoenix/base-tree/versions ## README # rc-tree --- ## API ### Tree props | name | description | type | default | |----------|----------------|----------|--------------| | autoExpandParent | 自动展开指定的父节点 | bool | false | | checkable | 节点前添加 Checkbox 复选框 | bool/React Node | false | | checkedKeys | 受控选中的树节点（设置后，默认选中的键将不起作用）。注意：父节点和子节点是关联的，如果父节点的键存在，则检查所有子节点，反之亦然。当设置checkable和checkStrictly时，它应该是一个包含checked数组和半checked数组的对象。 | String[]/{checked:Array,halfChecked:Array} | [] | | checkStrictly| checkable状态下节点选择完全受控（父子节点选中状态不再关联） | bool | false | | checkUpStrictly| checkable状态下节点选择父控子（父节点改变，子节点联动，子节点改变父节点选中状态不再关联） | bool | false | | className | 根dom节点的附加css类 | String | '' | | defaultCheckedKeys | 默认选中复选框的树节点 | String[] | [] | | defaultExpandedKeys | 默认展开指定的树节点 | String[] | - | | defaultExpandAll | 默认展开所有树节点 | bool | false | | defaultExpandParent | 默认展开父节点 | bool | true | | defaultSelectedKeys | 默认选中的树节点 | String[] | [] | | disabled | 是否禁用树 | bool | false | | draggable | 设置节点可拖拽（IE>8） | bool | false | | expandedKeys |（受控）展开指定的树节点 | String[] | - | | icon | 自定义图标。可接收组件，props 为当前节点 props | element/Function(props) | - | | loadedKeys | 受控）已经加载的节点，需要配合 `loadData` 使用 | string[] | - | | loadData | 异步加载数据，返回值应该是一个promise | function(node) | - | | multiple | 支持点选多个节点（节点本身） | bool | false | | prefixCls | 样式前缀 | String | 'rc-loadDatatree' | | selectable | 是否可以被选中 | bool | true | | selectedKeys | 受控选定树节点（设置后，默认选定的键将不起作用） | String[] | [] | | showIcon | 是否显示图标 | bool | true | | singleLine | 设置是否整行选中 | bool | false | | treeData | TreeNodes数据数组，如果设置了它，则不需要构造子TreeNode。（值在整个数组中应该是唯一的）,`***h目前仅对treeData方式的使用，做了整行选择样式支持扩展，其他使用保持原组件方式***` | array<{key,title,children, [disabled, selectable]}> | - | | onCheck | 单击TreeNode/复选框触发 | function(checkedKeys, e:{checked: bool, checkedNodes, node, event, nativeEvent}) | - | | onExpand | 展开/收起节点时触发 | function(expandedKeys, {expanded: bool, node, nativeEvent}) | - | | onDragEnd | dragend 触发时调用| function({event,node}) | - | | onDragEnter | dragenter 触发时调用 | function({event,node,expandedKeys}) | - | | onDragLeave | dragleave 触发时调用 | function({event,node}) | - | | onDragOver | dragover 触发时调用（一直） | function({event,node}) | - | | onDragStart | dragstart 触发时调用 | function({event,node}) | - | | onDrop | drop 触发时调用 | function({event, node, dragNode, dragNodesKeys}) | - | | onLoad | 节点加载完毕时触发 | - | | onMouseEnter | 当鼠标进入TreeNode时调用 | function({event,node}) | - | | onMouseLeave | 当鼠标离开TreeNode时调用 | function({event,node}) | - | | onRightClick | 响应右键点击 | function({event,node}) | - | | onSelect | 节点选中时触发 | function(selectedKeys, e:{selected: bool, selectedNodes, node, event, nativeEvent}) | - | | switcherIcon | 指定节点切换图标 | ReactNode / (props: TreeNodeAttribute) => ReactNode | - | ### TreeNode props > note: if you have a lot of TreeNode, like more than 1000, > make the parent node is collapsed by default, will obvious effect, very fast. > Because the children hide TreeNode will not insert into dom. | name | description | type | default | |----------|----------------|----------|--------------| |className | 节点附加的样式 | String | '' | |style | 设置节点的style样式 | Object | '' | |disabled | 是否禁用Treenode | bool | false | |disableCheckbox | 是否禁用Treenode'复选框 | bool | false | |title | 树/子树的标题 | String/element | '---' | |key | 节点标识，全局唯一。它与树属性（默认）expandedkeys/（默认）checkedkeys/（默认）selectedkeys一起使用。 | String | treeNode's position | |isLeaf | 是否为叶节点(设置了loadData时有效) | bool | false | |icon | 自定义图标。可接收组件，props 为当前节点 props | element/Function(props) | - | | switcherIcon | 指定节点切换图标 | ReactNode / (props: TreeNodeAttribute) => ReactNode | - | ## note The number of treeNodes can be very large, but when enable `checkable`, it will spend more computing time, so we cached some calculations(e.g. `this.treeNodesStates`), to avoid double computing. But, this bring some restrictions, **when you async load treeNodes, you should render tree like this** `{this.state.treeData.length ? {this.state.treeData.map(t => )} : 'loading tree'}` ## Development ``` npm install npm start ``` ## Test Case http://localhost:8018/tests/runner.html?coverage ## Coverage http://localhost:8018/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8018/tests/runner.html?coverage ## License rc-tree is released under the MIT license. ## other tree view - [ztree](http://www.ztree.me/) - [jqTree](http://mbraak.github.io/jqTree/) - [jquery.treeselect](http://travistidwell.com/jquery.treeselect.js/) - [angular Select Tree](http://a5hik.github.io/angular-multi-select-tree/) --- _Source: https://npm.io/package/@beisen-phoenix/base-tree · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._