我的成长磨练,每天写博客,年轻人,卷起袖子,来把手弄脏吧! ------ 博客首页

react版组织树项目终于开源了,建议收藏!

github地址:https://github.com/artdong/react-org-tree

react-org-tree

A simple organization tree component based on react

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)

横向.png

纵向(vertical)

纵向.png

部分展开(expand)

部分展开.png

全部展开(expandAll)

全部展开.png


经典前端面试题每日更新,欢迎参与讨论,地址:https://github.com/daily-interview/fe-interview


更多angular1/2/4/5、ionic1/2/3、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目,请关注微信公众号——全栈弄潮儿

微信公众号

posted @ 2020-01-13 18:08  全栈弄潮儿  阅读(734)  评论(0编辑  收藏  举报

全栈弄潮儿 - 创建于 2015年5月5日

这是一位web前端开发工程师的个人站,内容主要是网站开发方面的技术文章,大部分来自学习或工作,部分来源于网络,希望对大家有所帮助。

致力于web前端开发,关注互联网前沿技术与趋势。


vue2-admin-grace | ionic3-awesome | Bootstrap中文网