一、安装插件
npm install --save-dev vue2-org-tree
// # 建议安装 less-loader 防止样式出现问题
// 建议版本为 5.0.0，不然可能会报错
npm install --save-dev less less-loader二、在main中添加
import Vue2OrgTree from 'vue2-org-tree'
Vue.use(Vue2OrgTree)下载css样式
https://unpkg.com/vue2-org-tree/dist/style.css在使用页面引入
@import '../assets/css/style.css';三、使用插件实现
1.页面使用
<vue2-org-tree :data="data"/>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人事"
}
]
},2.修改背景色和点击事件
<vue2-org-tree :data="data" horizontal :label-class-name="labelClassName"
@on-node-click="onNodeClick" />data数据中添加
data() {
return {
labelClassName:"bg-color-blue",//自定义颜色
collapsable:true, //折叠属性
horizontal:true, // 水平排列方式
}
},
methods: {
onNodeClick(e, data) {
console.log(data)
},
}
<style lang="scss" scoped>
@import '../assets/css/style.css';
::v-deep .bg-color-blue{
color: orange;
background-color: red;
}
</style>移入移出事件
@on-node-mouseover="onMouseover"
@on-node-mouseout="onMouseout"
onMouseout(e, data) {
},
onMouseover(e, data) {
},四、点击展开关闭
1.增加@on-expand="onExpand" 方法
<vue2-org-tree :data="NewsList[0]" :horizontal="horizontal"
:label-class-name="labelClassName" :collapsable="collapsable"
@on-node-click="onNodeClick" @on-expand="onExpand"
:renderContent="renderContent"/>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);
}
},
collapse(list) {
var _this = this;
list.forEach(function (child) {
if (child.expand) {
child.expand = false;
}
child.children && _this.collapse(child.children);
});
},五、自定义返回内容
1、:renderContent="renderContent"
<vue2-org-tree :data="NewsList[0]" :horizontal="horizontal"
:label-class-name="labelClassName" :collapsable="collapsable"
@on-node-click="onNodeClick" @on-expand="onExpand"
:renderContent="renderContent"/>2、js部分
renderContent(h, data) {
if(data.type==1){
return (
<div class="cardlable">
{data.sj?this.classType('书记',data.sj):''}
</div>
)
}else{
return (
<div class="cardlable">{data.label}</div>
)
}
},
classType(name,data){
if(!Array.isArray(data)) return;
return (
<div class="position-item">
<h5>{name}:</h5>
<div class="name">
{
data.map(item=> {
return <h6>{item}</h6>
})
}
</div>
</div>
)
},完整代码
<template>
<div class="zznews-list">
<vue2-org-tree :data="data" :horizontal="horizontal"
:label-class-name="labelClassName" :collapsable="collapsable"
@on-node-click="onNodeClick" @on-expand="onExpand"
:renderContent="renderContent"/>
</div>
</template>
<script>
export default {
data() {
return {
labelClassName:"bg-color-blue",
collapsable:true,
jibenInfo:{},
showBJiBenModel:false,
horizontal:true,
data:{
id: 0,
label: "XXX科技有限公司",
children: [
{
id: 2,
label: "产品研发部",
children: [
{
id: 5,
label: "研发-前端",
children: [
{
id: 55,
label: "前端1"
},
{
id: 56,
label: "前端2"
},
{
id: 57,
label: "前端3"
},
{
id: 58,
label: "前端4"
}
]
},
{
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人事"
}
]
},
},
}
},
created(){
},
methods: {
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);
}
},
onNodeClick(e, data) {
console.log(data)
},
collapse(list) {
var _this = this;
list.forEach(function (child) {
if (child.expand) {
child.expand = false;
}
child.children && _this.collapse(child.children);
});
},
renderContent(h, data) {
return (
<div class="cardlable">{data.label}</div>
)
},
}
}
</script>
<style lang="scss" scoped>
::v-deep .bg-color-blue{
color: orange;
background-color: red;
}
</style>六、补充插件 关系组件（relation-graph）
扫描二维码关注公众号，回复：
16431397 查看本文章
