组织架构图-zm-tree-org

介绍

一个简易版组织架构图，组件依赖于vue-org-tree (opens new window)， 在此基础上将部分源代码进行优化修改。增加鼠标拖拽和鼠标滚轮缩放，并支持节点拖拽，以及节点编辑等功能。

• 架构图支持拖拽和通过鼠标滚轮缩放
• 支持新增/删除节点
• 支持编辑节点名称
• 支持拖动节点改变树结构
• 支持自定义右键菜单
• 支持slot自定义节点渲染内容
• 支持slot自定义展开按钮渲染内容

安装

注：vue2: npm install zm-tree-org@^2.1.3
@^2.1.3 表示版本号，建议锁定版本号来保证代码的稳定性

npm install zm-tree-org --save
# or 
yarn add zm-tree-org

引入

如引入发现样式丢失 引入import 'zm-tree-org/lib/zm-tree-org.css'

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

Vue.use(ZmTreeOrg);

基础使用

<zm-tree-org :data="orgData"></zm-tree-org>
export default {
      data(){
        return {
          orgData:{
           id: 1,     #组织id，必须
           label: "xxx科技有限公司",  #组织名称，必须
           disabled: true,   #是否可编辑
           children: [      #子级
              {
               id: 2,    #子级组织id，必须
               pid: 1,   #父级组织id，必须
               label: "产品研发部",   #组织名称，必须
               expand: false,  #当前节点下的节点是否默认展开
               noDragging: true,  #当前节点是够允许拖拽
               children: []
              }
           ]
          }
        }
      }
}

示例如下：

更多参数可参数下方文档地址

Gitee地址 (opens new window)
文档地址 (opens new window)

需求：

现实中碰见的需求，需求想让画出两个组织树，但是想让左右对立而不是像上图实例，然后查看发现有horizontal属性， 谁能想到此horizontal是只能已左边开头的横向，但是需求让两个树左右对立

• horizontal 是否横向 默认值false true横向
  
  但是horizontal属性只让我完成一半的需求，但是还有另外一半，但是我还想要一个与上图相反的方向的如下图，当我我脑子一下就想到怎么让这个图反转呢，找了半天文档也没有发现有什么属性或方式 然后沿着这个思路一直尝试.....然后......嘿！您猜怎么着...然后我就尝试出来了
  给自己respect！！！
  
  公布答案: 其实就是让通过transform让图形和文字都反转一下

.zm-tree-org{
   transform: scaleX(-1); # 整体反转
}
.tree-org-node__text{
  transform: scaleX(-1); # 文字单独反转
}