![68b902dc955f9728c997345c760b4c7e.png](https://i-blog.csdnimg.cn/blog_migrate/c59baee422193ec6e2c8d1809345525e.jpeg)
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)
![16454a09f7cf83b443020a50da25afa8.png](https://i-blog.csdnimg.cn/blog_migrate/0560a405e34cf9760b33200d2da7e80f.jpeg)
纵向(vertical)
![5ef20a32455a0045e2094ed96700440b.png](https://i-blog.csdnimg.cn/blog_migrate/e859fd4bc8cc18297ecaa3f612be1ee4.jpeg)
部分展开(expand)
![de799b9016cae4ce96eb5e88e4ad351e.png](https://i-blog.csdnimg.cn/blog_migrate/a4dd192d5559fd52d9849c1feb1ce6ea.jpeg)
全部展开(expandAll)
![f7b8a719e8dfc52452e595b99d1c4b9e.png](https://i-blog.csdnimg.cn/blog_migrate/29ea670e1cc45f2ed154772a8162d6cd.jpeg)
经典前端面试题每日更新,欢迎参与讨论,地址:https://github.com/daily-interview/fe-interview。
更多angular1/2/4/5、ionic1/2/3、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目,请关注微信公众号——全栈弄潮儿。