实现方式
- 安装依赖
npm i vue2-org-tree
- 使用的vue页面引入
<template>
<div class="container">
<div class="oTree" >
<vue2-org-tree name="test"
:data="data"
:horizontal="horizontal"
:collapsable="collapsable"
:render-content="renderContent"
:label-class-name="renderLabelClass"
@on-expand="onExpand"
@on-node-click="handleNodeClick" />
</div>
</div>
</template>
<script>
import Vue2OrgTree from 'vue2-org-tree'
export default {
components: {Vue2OrgTree},
data () {
return {
data: {
id: 0,
label: '流程1',
name: '188.00',
children: [
{
id: 1,
label: '流程2',
children: [
{
id: 11,
label: '流程3',
children: [
{
id: 111,
label: '流程4'
}
]
},
{
id: 12,
label: '流程5',
children: [
{
id: 121,
label: '流程6'
}
]
},
{
id: 13,
label: '流程7',
children: [
{
id: 131,
label: '流程8'
}
]
},
{
id: 14,
label: '流程9',
children: [
{
id: 141,
label: '流程10'
}
]
}
]
},
{
id: 2,
label: '流程11',
children: [
{
id: 21,
label: '流程12',
children: [
{
id: 211,
label: '流程13'
},
{
id: 212,
label: '流程14'
},
{
id: 213,
label: '流程15'
},
{
id: 214,
label: '流程16'
},
{
id: 215,
label: '流程17'
},
{
id: 216,
label: '流程18'
},
{
id: 217,
label: '流程19'
},
{
id: 218,
label: '流程20'
}
]
},
{
id: 22,
label: '流程21',
children: [
{
id: 221,
label: '流程22'
},
{
id: 222,
label: '流程23'
}
]
}
]
},
{
id: 3,
label: '流程24',
children: [
{
id: 31,
label: '流程25'
}
]
},
{
id: 4,
label: '流程26',
children: [
{
id: 41,
label: '流程27'
}
]
},
{
id: 5,
label: '流程28',
children: [
{
id: 51,
label: '流程29',
children: [
{
id: 511,
label: '流程30'
}
]
},
{
id: 52,
label: '流程31',
children: [
{
id: 521,
label: '流程32'
},
{
id: 522,
label: '流程33'
},
{
id: 523,
label: '流程34'
}
]
},
{
id: 53,
label: '流程35',
children: [
{
id: 531,
label: '流程36'
},
{
id: 532,
label: '流程37'
},
{
id: 533,
label: '流程38'
}
]
},
{
id: 54,
label: '流程39'
},
{
id: 55,
label: '流程40'
}
]
},
{
id: 6,
label: '流程41',
children: [
{
id: 61,
label: '流程42',
url: 'https://world.taobao.com/'
},
{
id: 62,
label: '流程43',
url: 'http://www.baidu.com'
},
{
id: 63,
label: '流程44',
url: 'https://www.google.com/'
}
]
}
]
},
expandAll: false,
horizontal: true,
collapsable: true
}
},
mounted() {
this.toggleExpand(this.data, true)
},
methods:{
renderLabelClass (node) {
return node.label.length<16? 'companyItem': 'companyHItem'
},
toggleExpand(data, val) {
if (Array.isArray(data)) {
data.forEach((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);
}
}
},
onExpand: function(e, data) {
if ('expand' in data) {
data.expand = !data.expand
if (!data.expand && data.children) {
console.log('kkkkkkkkkkk')
this.collapse(data.children)
}
} else {
this.$set(data, 'expand', true)
}
},
collapse: function(list) {
var _this = this
console.log(list,'kkkkkkk')
list.forEach(function(child) {
console.log(child,'kkkkkkkkkk')
if (child.expand) {
child.expand = false
}
child.children && _this.collapse(child.children)
})
},
handleNodeClick (e, data) {
console.log(data)
},
renderContent: function (h, data) {
console.log(data, 'kkkkk')
return h('div', [
h('span', data.label),
h('br'),
h('span', '已完成')
])
},
}
};
</script>
</style>
- :render-content=“renderContent”
设置label,renderContent 函数中返回一个包含多个文本并换行显示的元素
renderContent(h, data) {
return h('div', {
class: 'custom-node', // 添加类名也可以使用:label-class-name进行添加
}, [
h('span', data.label),
h('br'),
h('span', '已完成'),
]);
},
