/rc-org-chart

基于 react 的组织架构组件，支持缩放、拖拽。可自定义拖拽规则，扩展性强。

Primary LanguageJavaScript

img

rc-org-chart

基于 React 的组织结构组件

✨ 特性

  • 使用简单，可扩展性强。
  • 可拖动调整位置。
  • 可自定义位置变动规则。
  • 可自定义节点视图。

📦 安装

npm install rc-org-chart --save
yarn add rc-org-chart

🔨 示例

import OrgChart from 'rc-org-chart';

ReactDOM.render(<OrgChart />, mountNode);

引入样式：

import 'rc-org-chart/lib/style';

🍭 API

属性 说明 类型 默认值
data 组织结构数据 (必填项且每条数据必须有唯一 id) array [ ]
pan 图层是否允许拖动 boolean true
zoom 图层是否允许缩放 boolean true
draggable 节点是否允许拖拽 boolean true
maxZoom 图层最大放大比例 number 2
minZoom 图层最大缩小比例 number 0.5
zoomStep 缩放幅度 number 2
customDrag 用户可根据具体的数据字段及业务场景制定节点拖拽规则，返回 true 则允许 drag 节点 添加到 drop 节点 (dropProps, dragProps) => true true
nodeRender 用户自定义节点的渲染 props =>
{props.name}
extraRender 位于节点下部的自定义渲染 props =>
{props.name}

⌨️ 本地开发

$ git clone git@github.com:Dolov/rc-org-chart.git
$ cd rc-org-chart
$ npm install
$ npm start

打开浏览器访问 http://127.0.0.1:8000