A simple organization tree component based on react
If you are using vue, see vue-org-tree
# use npm
npm i react-org-tree
# use yarn
yarn add react-org-tree
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}
>横向(horizontal)
纵向(vertical)
部分展开(expand)
全部展开(expandAll)
| 参数(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) |
https://artdong.github.io/react-org-tree/demo
react-org-tree is released under the MIT license.
- 微信公众号二维码，扫一扫或者搜索"全栈弄潮儿"即可关注
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent