npm version mnt-image GitHub stars GitHub forks npm download dumi GitHub license
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.
- 微信公众号二维码,扫一扫或者搜索"全栈弄潮儿"即可关注