1 Star 2 Fork 0

twp0217 / react-org-chart

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

react-org-chart - 组织结构图

使用

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 <OrgChart data={data} />;
};

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,欢迎讨论。

空文件

简介

React组织结构图 展开 收起
TypeScript 等 2 种语言
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
TypeScript
1
https://gitee.com/twp0217/react-org-chart.git
git@gitee.com:twp0217/react-org-chart.git
twp0217
react-org-chart
react-org-chart
master

搜索帮助