vue-tree-color组件实现组织架构图

最近接了一个小私活，任务不算重，需求也很简单，就是要将公司的所有部门机构以组织架构图的形式展示出来(如上图)，嗯，很简单，安排。

因为公司的架构是基于 Vue 来做的，所以我们采用 vue-tree-color 组件来实现组织架构图。

安装

# use npm
npm i vue-tree-color

安装 loader

馨提示：不安装 less-loader 基本上都会报错

npm install --save-dev less less-loader

Import Plugins

import Vue from 'vue'
import Vue2OrgTree from 'vue-tree-color'
 
Vue.use(Vue2OrgTree)

开始

因为已经安装过了组件，所以可以直接使用，在 vue 页面中，直接使用组件标签，动态绑定 data 数据（data 数据为递归数据即可）

<vue2-org-tree :data="data"/>

data 数据放入页面中，

其中，data 数据中，id 每个元素不同的 ID ，label 为 name， children 为自己的子集数据。

比如数据是这样的（官方给出的）：

data: {
        id: 0,
        label: "XXX 科技有限公司",
        children: [
          {
            id: 2,
            label: "产品研发部",
            children: [
              {
                id: 5,
                label: "研发-前端"
              },
              {
                id: 6,
                label: "研发-后端"
              },
              {
                id: 9,
                label: "UI 设计"
              },
              {
                id: 10,
                label: "产品经理"
              }
            ]
          },
          {
            id: 3,
            label: "销售部",
            children: [
              {
                id: 7,
                label: "销售一部"
              },
              {
                id: 8,
                label: "销售二部"
              }
            ]
          },
          {
            id: 4,
            label: "财务部"
          },
          {
            id: 9,
            label: "HR 人事"
          }
        ]
      }

排列方式

刚才我们看到是默认排列方式，其实还有一种水平排列方式，只需要加上 horizontal 即可，它有两个参数是true、false：

<vue2-org-tree
 :data="data"
 :horizontal="true" />

折叠展示

添加一个属性 collapsable：

<vue2-org-tree :data="data" :horizontal="true" collapsable />

那既然折叠起来了，怎么展开呢，需要加一个组件自带方法on-expand：

<vue2-org-tree
 :data="data"
 :horizontal="true"
 collapsable
 @on-expand="onExpand" />

js 部分：

methods: {
    collapse(list) {
        var _this = this
        list.forEach(function(child) {
            if (child.expand) {
                child.expand = false
            }
            child.children && _this.collapse(child.children)
        })
    },
    onExpand(e, data) {
        if ('expand' in data) {
            data.expand = !data.expand
            if (!data.expand && data.children) {
                this.collapse(data.children)
            }
        } else {
            this.$set(data, 'expand', true)
        }
    }
}

效果如下：

点击节点

添加一个方法 on-node-click：

<vue2-org-tree
 :data="data"
 :horizontal="true"
 collapsable
 @on-expand="onExpand"
 @on-node-click="onNodeHandle" />

js 代码：

onNodeHandle(e, data) {
    // e 是节点数据
    console.log(e)
    // data 是渲染在节点上的数据
    console.log(data)
},

打印效果：

修改背景色

使用 label-class-name 我们还可以动态绑定自定义class：

<vue2-org-tree 
 :data="data" 
 :horizontal="true"      
 :label-class-name="labelClassName"           
/>

我们一起来尝试一下吧！

js 代码:

data() {
  return {
    labelClassName:"bg-color-orange"
  }
}

CSS 代码：

.bg-color-orange{
    color: #fff;
    background-color: orange;
}

注意：style标签里不能加 scoped 不然自定义样式无效。

其他功能

组件还提供了其他功能，大概比较常用的还有，设置 节点 颜色 ，移入移出、自定义方块颜色功能等，我把 github 地址粘贴进来，有兴趣的可以自己了解

点击链接即可查看组件更多功能。

以上关于vue-tree-color组件实现组织架构图的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。