React-org-tree NPM

react-org-tree

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)