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

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组件实现组织架构图

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们