vue2 使用vue-org-tree 组件完整示例Demo vue2-org-tree

先上效果

可以切换节点颜色，展开与否，坚排或者横排都可以配置。

安装

安装vue2-org-tree, 然后再安装样式 less-loade

cnpm install --save-dev less less-loader
cnpm install --save-dev vue2-org-tree

或者：

npm i vue2-org-tree -S
npm install --save-dev less less-loader –S

安装完成后，vue2项目根目录下package.json自动更新以上 2个包信息

 "dependencies": {
    "core-js": "^3.8.3",
    "echarts": "^5.4.0",
    "element": "^0.1.4",
    "element-ui": "^2.15.10",
    "install": "^0.13.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "moment": "^2.29.4",
    "vue": "^2.6.14",
    "vue-router": "^3.5.2",
    "vue2-org-tree": "^1.3.6"
  },

项目源码：

main.js

TreeTest.vue

App.vue 

样式配置：

•  *：horizontal 组织结构图的排列方式，水平还是竖直，值为true 或 false
•          collapsable 折叠效果，值为true 或 false
•          label-class-name 修改背景色，支持自定义类名
•          render-content 定义如何渲染 node 标签，绑定的 renderContent 是函数
•          on-expand 定义折叠的组织结构如何展开，该函数参数必须传两个，第一个是 e ，第二个是 data
•          on-node-click 定义当前节点被点击时执行的方法

需要修改label名称

:render-content="renderContent" //这个属性 
renderContent(h, data) { return data.taskName },

注意：

注意：在style中引入样式，必须引入 引入全局样式： lang的值是less 样式

如下，否则展开收缩按钮显示不出来，可以通过上面方法安装，或者下载less文件引用。

https://gitee.com/hukaicode/vue-org-tree/tree/master/src/styles

可以根据实际项目需要进行修改。