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组件实现组织架构图
码云笔记 » vue-tree-color组件实现组织架构图