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: about 2 months 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 4 years ago)
• Default Branch: master
• Last Pushed: 2023-10-08T09:06:43.000Z (12 months ago)
• Last Synced: 2024-07-09T00:52:45.103Z (3 months 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: 83
• Watchers: 2
• Forks: 37
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-org-tree

[![npm version][npm-image]][npm-url] [![mnt-image](https://img.shields.io/maintenance/yes/2023.svg?style=flat-square)](../../commits/master) [![GitHub stars](https://img.shields.io/github/stars/artdong/react-org-tree.svg?style=flat-square)](https://github.com/artdong/react-org-tree/stargazers) [![GitHub forks](https://img.shields.io/github/forks/artdong/react-org-tree.svg?style=flat-square)](https://github.com/artdong/react-org-tree/network) [![npm download][download-image]][download-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](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.

#### 欢迎关注微信公众号`全栈弄潮儿` ，获取更多学习资源及技术文章等

* 微信公众号二维码，扫一扫或者搜索"全栈弄潮儿"即可关注







#### 程序员专属工具箱（微信小程序）



  



#### 薅羊毛，大额红包码







#### 打赏，请作者喝一杯咖啡