@lugia/react-org-tree
v1.0.0
Published
a simple organization tree component based on react
Downloads
8
Readme
react-org-tree
A simple organization tree component based on react
If you are using vue, see vue-org-tree
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)
API
参数(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)
Example
https://artdong.github.io/react-org-tree/demo
License
react-org-tree is released under the MIT license.
欢迎关注微信公众号全栈弄潮儿
,获取更多学习资源及技术文章等
- 微信公众号二维码,扫一扫或者搜索"全栈弄潮儿"即可关注