https://github.com/artdong/react-org-tree
😃 【react组织树、组织架构】a simple organization tree component based on react
https://github.com/artdong/react-org-tree
dumi dumi-demo org-tree organization-chart organization-tree react-org-chart react-org-tree tree
Last synced: 21 days ago
JSON representation
😃 【react组织树、组织架构】a simple organization tree component based on react
- Host: GitHub
- URL: https://github.com/artdong/react-org-tree
- Owner: artdong
- License: mit
- Created: 2020-01-09T03:37:17.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-10-08T09:06:43.000Z (over 1 year ago)
- Last Synced: 2025-04-30T02:45:34.312Z (25 days ago)
- Topics: dumi, dumi-demo, org-tree, organization-chart, organization-tree, react-org-chart, react-org-tree, tree
- Language: JavaScript
- Homepage: https://artdong.github.io/react-org-tree
- Size: 2.02 MB
- Stars: 91
- Watchers: 1
- Forks: 40
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-org-tree
[![npm version][npm-image]][npm-url] [](../../commits/master) [](https://github.com/artdong/react-org-tree/stargazers) [](https://github.com/artdong/react-org-tree/network) [![npm download][download-image]][download-url] [](https://github.com/umijs/dumi) [](https://github.com/artdong/react-org-tree/blob/master/LICENSE)
[npm-image]: http://img.shields.io/npm/v/react-org-tree.svg?style=flat-square
[npm-url]: http://npmjs.org/package/react-org-tree
[download-image]: https://img.shields.io/npm/dm/react-org-tree.svg?style=flat-square
[download-url]: https://npmjs.org/package/react-org-tree
[bundlephobia-url]: https://bundlephobia.com/result?p=react-org-tree
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/react-org-tree
> A simple organization tree component based on react
> If you are using vue, see [vue-org-tree](https://github.com/hukaibaihu/vue-org-tree)
### Installation
```
# use npm
npm i react-org-tree
# use yarn
yarn add react-org-tree
```
### Usage
``` js
import OrgTree from 'react-org-tree';
const horizontal = false; // true：横向 false：纵向
const collapsable = true; // true：可折叠 false：不可折叠
const expandAll = true; // true: 全部展开 false：全部折叠
const data = {
id: 0,
label: 'XXX股份有限公司',
children: [{
id: 1,
label: '技术部',
children: [{
id: 4,
label: '后端工程师'
}, {
id: 5,
label: '前端工程师'
}, {
id: 6,
label: '运维工程师'
}]
}, {
id: 2,
label: '人事部'
}, {
id: 3,
label: '销售部'
}]
}
```
### Preview
`横向(horizontal)`
`纵向(vertical)`
`部分展开(expand)`
`全部展开(expandAll)`
## API
参数(prop) | 说明(descripton) | 类型(type) | 默认值(default)
-----------|-----------------------------------------|:----------------------:|:---------------------------------------------------------:
data | 树结构数据 | `Object` | {}
horizontal | 是否横向 | `Boolean` | `false`
collapsable | 是否可折叠 | `Boolean` | `false`
expandAll | 是否展开全部 | `Boolean` | `false`
labelWidth | 树节点宽度 | `Number` | `auto`
labelClassName | 树节点样式 | `String` | `white`
onClick | 点击事件 | Function(e:Event, data)
## Example
https://artdong.github.io/react-org-tree/demo
## License
react-org-tree is released under the MIT license.
#### 欢迎关注微信公众号`全栈弄潮儿` ，获取更多学习资源及技术文章等
* 微信公众号二维码，扫一扫或者搜索"全栈弄潮儿"即可关注
#### 程序员专属工具箱（微信小程序）
#### 薅羊毛，大额红包码
#### 打赏，请作者喝一杯咖啡
