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)

縱向(vertical)

部分展開(expand)

全部展開(expandAll)

---

開源組件地址：https://github.com/artdong/react-org-tree

"/<orgtree>

---

分享到:

---

閱讀更多 全棧弄潮兒 的文章

關鍵字: 收藏 工程師 組件

---