vue vue-org-tree 架构图

最新推荐文章于 2024-09-13 21:35:58 发布

你要走就走

最新推荐文章于 2024-09-13 21:35:58 发布

阅读量1.4k

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_48852004/article/details/126866402

版权

本文介绍了如何使用vue-org-tree插件在Vue.js项目中构建组织架构图。首先，详细阐述了从vue插件下载到在main.js中引入插件的步骤，包括解决兼容问题。接着，展示了在template和js中的具体写法，以及data的数据结构。最后，解释了如何通过renderContent属性和defaultProps定制节点的显示内容和样式，以满足实际应用需求。

摘要由CSDN通过智能技术生成

如图

在这里插入图片描述

附上vue-org-tree的github链接：
vue-org-tree插件的github链接：https://github.com/hukaibaihu/vue-org-tree#readme

步骤

vue插件下载，也可以直接cdn引入

npm install vue-tree-color——安装vue-tree-color，注意不是vue-org-tree

安装less和less-loader
安装less和less-loader之前，确定当前系统中是否已经安装过了less lessloaer，可以找到package.json文件，在此文件中检索less和less-loader

npm install --save-dev less less-loader

在main.js中引入vue-org-tree插件

import Vue from 'vue'
import Vue2OrgTree from 'vue-tree-color'
Vue.use(Vue2OrgTree)

运行项目，此时报错了
报错信息：Syntax Error: TypeError: this.getOptions is not a function
需要在安装less和lessloader时，指定版本号，否则就会导致兼容问题。

npm i less@3.9.0 less-loader@4.1.0 -D

使用vue-org-tree插件
由于之前在main.js中已经引入插件到全局了，则此时可以直接在页面中使用

template中的写法

 1. data:就是数据格式，时一个对象，具体格式下面有示例
 2. horizontal:默认是false，即纵向展示
 3. label-class-name:可以给节点添加的类名，不过我这边使用了没有效果，下面有其他方法来处理节点样式
 4. collapsable:是否折叠，有这个属性，则表示默认折叠，有其他方法可以在存在此属性时，也保证是展开状态
 5. on-expand:点击折叠点，点击可以展开，再次点击可以折叠，是个方法
 6. on-node-click:顾名思义，就是点击节点，触发的事件
 7. on-node-mouseover:鼠标移入节点触发的事件，可以触发一个弹层用于展示详情
 8. on-node-mouseout:鼠标移出节点触发的事件，可以控制详情弹层的隐藏

<vue2-org-tree
  :data="data"
  :horizontal="true"
  :label-class-name="labelClassName"
  collapsable
  @on-expand="onExpand"
  @on-node-click="NodeClick"
  @on-node-mouseover="onMouseover"
  @on-node-mouseout="onMouseout"
  :renderContent="renderContent"
/>
<vue2-org-tree
  :data="data"
  :label-class-name="labelClassName"
  collapsable
  @on-expand="onExpand"
  @on-node-click="NodeClick"</