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)
横向. PNG
纵向 (vertical)
纵向. PNG
部分展开 (expand)
部分展开. PNG
全部展开 (expandAll)
全部展开. PNG
经典前端面试题每日更新, 欢迎参与讨论, 地址: https://github.com/daily-interview/fe-interview.
来源: http://www.jianshu.com/p/758120ff4c6c