Skip to content

😃 【react组织树、组织架构】a simple organization tree component based on react

License

Notifications You must be signed in to change notification settings

artdong/react-org-tree

Repository files navigation

react-org-tree

npm version mnt-image GitHub stars GitHub forks npm download dumi GitHub license

A simple organization tree component based on react

If you are using vue, see vue-org-tree

Installation

# use npm
npm i react-org-tree

# use yarn
yarn add react-org-tree

Usage

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: '销售部'
    }]
}

<OrgTree
    data={data}
    horizontal={horizontal}
    collapsable={collapsable}
    expandAll={expandAll}
>

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.

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

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

Build errors

程序员专属工具箱(微信小程序)

薅羊毛,大额红包码

Build errors

打赏,请作者喝一杯咖啡

Build errors