实现组织架构图
1.安装vue前端依赖包
npm install vue-tree-color
安装vue-tree-color，注意不是vue-org-tree
2.安装less和less-loader
安装less和less-loader之前，确定当前系统中是否已经安装过了less lessloaer，可以找到package.json文件，在此文件中检索less和less-loader。
npm install --save-dev less less-loader
3.在main.js中引入vue-org-tree插件
import Vue2OrgTree from 'vue-tree-color'
Vue.use(Vue2OrgTree)
4.在组件中引用
<template>
<div class="hello">
<div class="org_tree_div" ref="org_tree_content">
<vue2-org-tree
:data="data"
:horizontal="true"
:label-class-name="labelClassName"
collapsable
@on-expand="onExpand"
@on-node-click="NodeClick"
:renderContent="renderContent"
/>
</div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
labelClassName: "bg-color-orange",
data: {
id: 0,
label: "XXX科技有限公司",
number: 40,
children: [
{
id: 2,
label: "产品研发部",
number: 25,
children: [
{
id: 5,
label: "研发-前端",
number: 4,
},
{
id: 6,
label: "研发-后端",
number: 4,
},
{
id: 9,
label: "UI设计",
number: 2,
},
{
id: 10,
label: "产品经理",
number: 15,
},
],
},
{
id: 3,
label: "销售部",
number: 10,
children: [
{
id: 7,
label: "销售一部",
number: 5,
},
{
id: 8,
label: "销售二部",
number: 5,
},
],
},
{
id: 4,
label: "财务部",
number: 3,
},
{
id: 9,
label: "HR人事",
number: 2,
},
],
},
currentUnit: "人",
};
},
methods: {
renderContent(h, data) {
return (
<div class="content_div">
<div class="title">{data.label}</div>
<div class="detail">
人员：{data.number}
{this.currentUnit}
</div>
</div>
);
},
//点击节点
NodeClick(e, data) {
console.log(e, data);
},
//默认展开
toggleExpand(data, val) {
if (Array.isArray(data)) {
data.forEach((item) => {
this.$set(item, "expand", val);
});
} else {
this.$set(data, "expand", val);
}
},
collapse(list) {
list.forEach((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);
}
},
},
};
</script>
<style lang="scss" scoped>
.hello {
width: 100vw;
height: 100vh;
}
.org_tree_div {
width: 100%;
height: 100%;
}
.org_tree_content {
width: 100%;
height: calc(100vh - 280px);
overflow: auto;
.org_tree_div {
display: inline-block;
min-width: 100%;
min-height: calc(100vh - 280px);
}
}
.org_tree_content {
width: 100%;
height: calc(100vh - 280px);
overflow: auto;
.org_tree_div {
display: inline-block;
min-width: 100%;
min-height: calc(100vh - 280px);
}
}
.org-tree-container {
background: transparent;
}
/deep/ .org-tree-node-label .org-tree-node-label-inner {
width: 180px;
height: 100%;
background-color: #aaaa00;
position: relative;
.title {
color: #ffffff;
font-weight: bold;
overflow: hidden; //溢出内容隐藏
text-overflow: ellipsis; //文本溢出部分用省略号表示
line-clamp: 2;
}
.detail {
color: #ffffff;
word-break: break-all;
}
</style>
属性介绍
horizontal是水平排列方式，它的参数是true、false
效果图分别如下：
label-class-name动态绑定自定义class- 默认折叠展示
collapsable - 展开
@on-expand="onExpand" - 默认展开，设置函数
toggleExpand()在获取到数据后调用就可以实现默认展开的设置
// 第一个参数为数据data，第二个参数为是否全部展开
toggleExpand(data, val) {
var _this = this;
if (Array.isArray(data)) {
data.forEach(function(item) {
_this.$set(item, "expand", val);
if (item.children) {
_this.toggleExpand(item.children, val);
}
});
} else {
this.$set(data, "expand", val);
if (data.children) {
_this.toggleExpand(data.children, val);
}
}
}
- 点击事件
@on-node-click="NodeClick"
NodeClick(e,data){
console.log(e)
// e 为 event
console.log(data)
// 当前项的所有详情 如：id label children
}
- 移入/移出事件
@on-node-mouseover="onMouseover"/@on-node-mouseout="onMouseout"返回值与点击事件大致相同 renderContent如何渲染节点标签
可以对样式进行调整，得到自己想要得的效果。
比如我想要调整展开收起的按钮显示，或者想在展开线上展示额外的数据；可以调整 renderContent的返回值和样式，比如下面的展示将展开收起按钮由圆形调整为方形，在展开线上加上了奖金的数据展示。
本文参考了大神的文章，根据自己的项目做了改动，这里就不展示实际项目的效果图了。
