https://github.com/twp0217/react-org-chart
React组织结构图
https://github.com/twp0217/react-org-chart
org-chart org-tree react react-component react-org-chart
Last synced: about 1 month ago
JSON representation
React组织结构图
- Host: GitHub
- URL: https://github.com/twp0217/react-org-chart
- Owner: twp0217
- Created: 2021-09-07T01:33:28.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2021-12-23T09:24:22.000Z (over 3 years ago)
- Last Synced: 2025-03-28T10:50:31.637Z (2 months ago)
- Topics: org-chart, org-tree, react, react-component, react-org-chart
- Language: TypeScript
- Homepage: https://twp0217.github.io/react-org-chart/
- Size: 728 KB
- Stars: 4
- Watchers: 1
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# react-org-chart - 组织结构图
## 使用
```typescript
import React from 'react';
import OrgChart, { OrgChartNodeDataType } from '@twp0217/react-org-chart';
export default () => {
const data: OrgChartNodeDataType = {
key: 0,
label: '科技有限公司',
children: [
{
key: 1,
label: '研发部',
children: [
{ key: 11, label: '开发-前端' },
{ key: 12, label: '开发-后端' },
{ key: 13, label: 'UI设计' },
{ key: 14, label: '产品经理' },
],
},
{
key: 2,
label: '销售部',
children: [
{ key: 21, label: '销售一部' },
{ key: 22, label: '销售二部' },
],
},
{ key: 3, label: '财务部' },
{ key: 4, label: '人事部' },
],
};
return ;
};
```
## API
### OrgChartNodeDataType
| 名称 | 类型 | 默认值 | 说明 |
| --------- | ---------------------- | ------ | ---------- |
| key | string \| number | - | key |
| label | number | - | label |
| children | OrgChartNodeDataType[] | - | 子节点集合 |
| className | string | - | 类名 |
| style | React.CSSProperties | - | 样式 |
### OrgChartProps
| 名称 | 类型 | 默认值 | 说明 |
| ---------- | ----------------------------------------------------------------------------- | ------ | --------------------- |
| data | OrgChartNodeDataType | - | 数据 |
| className | string | - | 类名 |
| style | React.CSSProperties | - | 样式 |
| expandAll | boolean | true | 是否展开所有子节点 |
| expandable | boolean | false | 是否允许子节点展开 |
| renderNode | (node: OrgChartNodeDataType, originNode: React.ReactNode) => React.ReactNode; | - | 自定义渲染节点 |
| onExpand | (expanded: boolean, node: OrgChartNodeDataType) => void | - | 展开/收起节点时的回调 |
| onClick | (node: OrgChartNodeDataType) => void | - | 点击节点时的回调 |
## 支持
- 如果项目对你有帮助，请点颗星星:star:，谢谢。
- 如果你对项目有想法、问题、BUG，欢迎讨论。