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

目录
文章目录隐藏
  1. 安装
  2. 安装 loader
  3. Import Plugins
  4. 开始
  5. 排列方式
  6. 折叠展示
  7. 点击节点
  8. 修改背景色
  9. 其他功能

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 人事"
          }
        ]
      }

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

排列方式

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

<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)
        }
    }
}

效果如下:

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

点击节点

添加一个方法 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)
},

打印效果:

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

修改背景色

使用 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 地址粘贴进来,有兴趣的可以自己了解

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

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » vue-tree-color组件实现组织架构图

发表回复