网上的代码基本没问题,但在设置css上,用网上的实例:label-class-name不起效果,调整了一下就可以了。
<template>
<div>
<vue2-org-tree
:data="treedata"
:horizontal="true"
collapsable
@on-expand="onExpand"
@on-node-click="moduleClick"
:renderContent="renderContent"
/>
</div>
</template>
<script>
export default {
name: "InviteApp",
data() {
return {
treedata: {
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人事",
},
],
},
};
},
mounted() {
this.toggleExpand(this.treedata, true);
},
methods: {
collapse(list) {
var that = this;
list.forEach(function (child) {
if (child.expand) {
child.expand = false;
}
child.children && that.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);
}
},
toggleExpand(data, val) {
var that = this;
if (Array.isArray(data)) {
data.forEach(function (item) {
that.$set(item, "expand", val);
if (item.children) {
that.toggleExpand(item.children, val);
}
});
} else {
this.$set(data, "expand", val);
if (data.children) {
that.toggleExpand(data.children, val);
}
}
},
//*************************** */
//点击图例的每个模块
//***************************** */
moduleClick(e, data) {
console.log(e);
// e 为 event
console.log(data);
// 当前项的所有详情 如:id label children
},
//渲染节点
renderContent(h, data) {
return (
<div class="bgcolor">
<div class="firstlabel">
<i class="el-icon-user-solid"></i>
<span>{data.label}</span>
<span>男</span>
</div>
<div class="seclabel">测试人员</div>
</div>
);
},
},
};
</script>
<style>
/* 设置每个模块的css */
.bgcolor {
width: 190px;
height: 50px;
background: orange;
}
.firstlabel {
color: red;
font-size: 12px;
line-height: 25px;
font-weight: 900;
}
.seclabel {
font-size: 12px;
line-height: 25px;
color: blue;
}
/* 直接用dom的css设置 */
.org-tree-node-label .org-tree-node-label-inner {
margin: 0;
padding: 0;
}
</style>