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等技術文章、視頻教程和開源項目,請關注微信公眾號——全棧弄潮兒

微信公眾號


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM