rc-org-chart
基于 React 的组织结构组件
✨ 特性
- 使用简单，可扩展性强。
- 可拖动调整位置。
- 可自定义位置变动规则。
- 可自定义节点视图。
📦 安装
npm install rc-org-chart --saveyarn 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 [email protected]:Dolov/rc-org-chart.git
$ cd rc-org-chart
$ npm install
$ npm start打开浏览器访问 http://127.0.0.1:8000