当前位置：首页 > news >正文

vue项目使用vue2-org-tree

news 2025/9/17 1:34:02

在这里插入图片描述

实现方式

安装依赖

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.expandif (!data.expand && data.children) {console.log('kkkkkkkkkkk')this.collapse(data.children)}} else {this.$set(data, 'expand', true)}},collapse: function(list) {var _this = thisconsole.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', '已完成'),]);
},