zm-tree-org/README.md

A simplified organization chart with components dependent on [Vue org tree](https://github.com/hukaibaihu/vue-org-tree). On this basis, part of the source code is optimized and modified. And it depends on [Vue draggable recoverable](https://github.com/ma

# zm-tree-org

[![OSCS Status](https://www.oscs1024.com/platform/badge/sangtian152/zm-tree-org.svg?size=small)](https://www.oscs1024.com/project/sangtian152/zm-tree-org?ref=badge_small)

## 介绍
一个简易版组织架构图，组件依赖于vue-org-tree， 在此基础上将部分源代码进行优化修改。可鼠标拖动拖拽，以及鼠标滚轮缩放，并且支持拖动节点改变树结构。
- 架构图支持拖拽和通过鼠标滚轮缩放
- 支持新增/删除节点
- 支持编辑节点名称
- 支持拖动节点改变树结构
- 支持自定义右键菜单
- 支持slot自定义节点渲染内容
- 支持slot自定义展开按钮渲染内容

#### vue3.x版本请访问 [vue3-tree-org](https://sangtian152.github.io/vue3-tree-org/)

### 安装
```
npm install zm-tree-org --save
# or 
yarn add zm-tree-org
```

### 引入
```
import Vue from 'vue';
import ZmTreeOrg from 'zm-tree-org';
import "zm-tree-org/lib/zm-tree-org.css";

Vue.use(ZmTreeOrg);
```
### 使用示例
![](https://oscimg.oschina.net/oscnet/up-84b0329b0dff74d87da1252248deb5aab5e.png)

[示例代码](https://sangtian152.github.io/zm-tree-org/)

### 最新版本

[![NPM version](https://img.shields.io/npm/v/zm-tree-org)](https://www.npmjs.com/package/zm-tree-org)

### 文档

[说明文档](https://sangtian152.github.io/zm-tree-org/).