关于组织架构图，效果图如下：

之前我是用jq写过一个组织架构图，文章链接如下：当时是用的jOrgChart

jq版本的组织架构图：https://blog.csdn.net/yehaocheng520/article/details/117379214?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162883781016780264023604%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=162883781016780264023604&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_blogfirst_rank_v2~rank_v29-1-117379214.pc_v2_rank_blog_default&utm_term=%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84%E5%9B%BE&spm=1018.2226.3001.4450

当时对jOrgChart不是很熟，因此在写的时候遇到了很多问题，虽然最终实现了功能，但并不完美。

今天在看不同的后台管理系统框架，看到了iview-vue，在这个框架中看到了组织架构图，进而知道了vue-org-tree这个插件，可以实现vue版本的组织架构图。

简易版效果图如下：

我从网上找到一个大神关于vue-org-tree这个插件的详细使用步骤，大神写的非常的详细，我基本上都是参照大神完成的。

大神关于vue-org-tree插件的具体使用步骤：https://www.cnblogs.com/10ve/p/12573772.html

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

下面将我的步骤记录如下：

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

我刚开始是按照github上的安装的，后来发现安装之后有问题，因此我直接按照大神提供的思路进行安装了。

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

2.安装`less`和`less-loader`

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

npm install --save-dev less less-loader

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

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

4.运行项目，此时报错了

报错信息：Syntax Error: TypeError: this.getOptions is not a function

于是，百度：
大神解决vue安装less lessloader插件报错问题：https://blog.csdn.net/zhangyuying_777/article/details/115114147

报错原因及解决办法：

需要在安装less和lessloader时，指定版本号，否则就会导致兼容问题。

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

安装完成后，再次运行，成功。

5.使用`vue-org-tree`插件

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

`template`中的写法

我下了横向和纵向两种，

data:就是数据格式，时一个对象，具体格式下面有示例

horizontal:默认是false，即纵向展示

label-class-name:可以给节点添加的类名，不过我这边使用了没有效果，下面有其他方法来处理节点样式

collapsable:是否折叠，有这个属性，则表示默认折叠，有其他方法可以在存在此属性时，也保证是展开状态

on-expand:点击折叠点，点击可以展开，再次点击可以折叠，是个方法

on-node-click:顾名思义，就是点击节点，触发的事件

on-node-mouseover:鼠标移入节点触发的事件，可以触发一个弹层用于展示详情

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"@on-node-mouseover="onMouseover"@on-node-mouseout="onMouseout":renderContent="renderContent"
/>

`js`中的写法

`data`的数据结构

data(){return{labelClassName: "bg-color-orange",basicInfo: { id: null, label: null },basicSwitch: false,data: {id: 0,label: "XXX科技有限公司",children: [{id: 2,label: "产品研发部",children: [{id: 5,label: "研发-前端",children: [{id: 55,label: "前端1"},{id: 56,label: "前端2"},{id: 57,label: "前端3"},{id: 58,label: "前端4"}]},{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人事"}]},}
},
methods:{//渲染节点renderContent(h, data) {return (<div><div><i class="el-icon-user-solid"></i><span>{data.label}</span><span>男</span></div><div style="font-size:12px;line-height:20px;">测试人员</div></div>);},//鼠标移出onMouseout(e, data) {this.basicSwitch = false;},//鼠标移入onMouseover(e, data) {this.basicInfo = data;this.basicSwitch = true;var floating = document.getElementsByClassName("floating")[0];floating.style.left = e.clientX + "px";floating.style.top = e.clientY + "px";},//点击节点NodeClick(e, data) {console.log(e, data);},//默认展开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);}}},collapse(list) {list.forEach(child => {if (child.expand) {child.expand = false;}child.children && this.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);}},
}

上面代码中，有个渲染节点的函数，因为默认的样式是只展示标签中的label字段，但是实际应用场景中，经常需要展示其他的字段，则此时可以通过渲染节点的函数，对节点进行重新编写及样式调整。
就是下面的函数：

renderContent(h, data) {return (<div><div><i class="el-icon-user-solid"></i><span>{data.label}</span><span>男</span></div><div style="font-size:12px;line-height:20px;">测试人员</div></div>);},

注意：在渲染函数中，变量可以直接通过{}单大括号来进行展示，而不是template中的双大括号的展示形式

通过上面的代码，就可以实现下面的效果了：

此处的渲染节点的函数写法，在插件文档上其实是没有详细描述的，我是百度查找到的答案。
vue中使用tree自定义节点时的render-content的链接：https://blog.csdn.net/weixin_42329676/article/details/89713008

虽然不是同一个组件，但是写法是可以借鉴的：

我在上面提供的渲染方法的基础上，修改后同样实现了渲染组织架构图节点的效果。

上面还提到了，节点样式处理，当无法通过label-class-name来进行调整样式时，可以通过下面的方式来处理：

.org-tree-node-label-inner {color: #fff;background-color: orange;
}

完成！！！

vue——实现组织架构图(vue-org-tree)——技能提升相关推荐

好用的基于vue的组织架构图组件
都是基于vue的组织架构图,有支持vue2.x和vue3.x,可自行选择使用一.vue-okr-tree(支持vue2) 文档地址:vue2-okr-tree 这个文档里面只有使用方法,不像vue3 ...
写一个组织架构图组件来深入认识vue函数式高阶组件
本文涉及到的知识点: Vue函数式组件递归函数深拷贝对象正则匹配近期在开发一个vue组织架构图组件时,为了实现高性能渲染和一些特殊用法,使用了函数式组件,要实现的效果是这样: 写一个组织架构图 ...
组织架构图实现——jOrgChart的使用
最近公司需要做一个组织架构图,具体的功能如下: 我这边是做了横向和纵向两种展示方式: 目前这个还不是最终定稿,先不管了,光做这些就花了我好几天的时间了.jq操作dom我已经忘光了.. 步骤1:百度检索 ...
使用Echars实现水滴状、环形图、分割图、堆叠、组织架构图、地图轮廓等图表
百度Echarts 水滴状图表横向柱形图分割块柱形图曲线面积图横向堆叠柱形图环形进度图饼状图饼状图多个标题组织架构图省市轮廓地图新疆省地图全国地图折线图阴影效果柱形折线混合图 ...
好看的动态组织架构图的实现（JavaScript InfoVis Toolkit）
http://philogb.github.io/jit/ 插件下载地址,地址里面可找到英文api, http://philogb.github.io/jit/static/v20/Docs/fil ...
组织架构图怎么画？思维导图创作教程分享
组织架构图就是把组织分成若干部分,通过组织结构图,我们可以看出各部门之间的从属关系,也能让大家清楚了解自己的岗位.工作,使得组织的协调性更加明显,绘制一份专业明了的组织架构图其实很简单,学会以下几个步 ...
OrgChart组织架构图控件
利用OrgChart组织架构图控件欢迎加入公众号进行互动:
html组织架构插件,jQuery组织架构图插件okrTree.js
插件描述:jQuery组织架构图支持拖拽节点,支持插入标记节点,分支节点更新时间:2021-03-02 23:52:07 更新说明: 1. 修改默认主题, 2. 添加自定义主题接口var s = $ ...
html5控件结构图,OrgChart组织架构图控件
插件描述:jQuery OrgChart 是一个用来绘制组织结构图的 jQuery 插件. 可以自己定加载自己想要的组织架构,通过json的形式该插件为画组织架构图插件,通过OrgChart API ...
VUE使用vue-tree-color组件实现组织架构图（递归数据，简单明了）
npm # use npm npm install vue-tree-color 安装loader npm install --save-dev less less-loader Import Plu ...

vue——实现组织架构图(vue-org-tree)——技能提升

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

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

2.安装`less`和`less-loader`

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

4.运行项目，此时报错了

5.使用`vue-org-tree`插件

`template`中的写法

`js`中的写法

`data`的数据结构

vue——实现组织架构图(vue-org-tree)——技能提升相关推荐

最新文章

热门文章

vue——实现组织架构图(vue-org-tree)——技能提升

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

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

2.安装less和less-loader

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

4.运行项目，此时报错了

5.使用vue-org-tree插件

template中的写法

js中的写法

data的数据结构

vue——实现组织架构图(vue-org-tree)——技能提升相关推荐

最新文章

热门文章

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

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

2.安装`less`和`less-loader`

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

5.使用`vue-org-tree`插件

`template`中的写法

`js`中的写法

`data`的数据结构