如何搭建组织架构图

如何搭建组织架构图

1.首先设置层级数据

data:{
  label: '中国',
  id: '00',
  level:1,
  children:[
     {
        id:'01',
        label: '东北区域',
        level:2,
        children: [
          {
            label: '黑龙江',
            id: '01_1',
            level:3,
          },
          {
            label: '吉林',
            id: '01_2',
            level:3,
          },
          {
            label: '辽宁',
            id: '01_3',
            level:3,
          }
        ]
     },
     {
        id:'02',
        label: '华北区域',
        level:2,
        children: [
          {
            label: '北京',
            id: '02_1',
            level:3,
          },
          {
            label: '天津',
            id: '02_2',
            level:3,
          },
          {
            label: '河北',
            id: '02_3',
            level:3,
          },
          {
            label: '山西',
            id: '02_4',
            level:3,
          },
          {
            label: '内蒙古',
            id: '02_5',
            level:3,
          }
        ]
     },
     {
        id:'03',
        label: '西南区域',
        level:2,
        children: [
          {
            label: '四川',
            id: '03_1',
            level:3,
          },
          {
            label: '重庆',
            id: '03_2',
            level:3,
          },
          {
            label: '贵州',
            id: '03_3',
            level:3,
          },
          {
            label: '云南',
            id: '03_4',
            level:3,
          },
          {
            label: '西藏',
            id: '03_5',
            level:3,
          }
        ]
     } ,
     {
        id:'04',
        label: '中南区域',
        level:2,
        children:[
          {
            label: '河南',
            id: '04_1',
            level:3,
          },
          {
            label: '湖北',
            id: '04_2',
            level:3,
          },
          {
            label: '湖南',
            id: '04_3',
            level:3,
          },
          {
            label: '广东',
            id: '04_4',
            level:3,
          },
          {
            label: '广西',
            id: '04_5',
            level:3,
          },
          {
            label: '海南',
            id: '04_6',
            level:3,
          },
        ]
       }
    ]
}

2.之后安装插件vue2-org-tree

npm i vue2-org-tree

3.在vue项目入口函数内引入

import Vue2OrgTree from 'vue2-org-tree'
import 'vue2-org-tree/dist/style.css'
Vue.use(Vue2OrgTree)

4.新建.vue文件，引入层级数据

<vue2-org-tree :data="data"></vue2-org-tree>

此时页面的样式如下

5.根据需求和ui的意见开始美化样式

①引入自定义的样式属性

<vue2-org-tree :data="data" :label-class-name="labelClassName"></vue2-org-tree>

②定义属性

labelClassName:"bg-color-orange",

③样式

.bg-color-orange{
    color: rgba(42, 130, 228, 1);
    border: 1.5px solid rgba(42, 130, 228, 1);
}

此时页面的样式如下

6.样式不符合产品及ui的意思，要求组织架构的分支线也要变颜色

.org-tree-node:not(:first-child):before, .org-tree-node:not(:last-child):after {
    border-top: 1.5px solid rgba(42, 130, 228, 1);
}
.org-tree-node:after {
    left: 50%;
    border-left: 1.5px solid rgba(42, 130, 228, 1);
}
.org-tree-node-children:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 20px;
    border-left: 1.5px solid rgba(42, 130, 228, 1);
}

此时页面的样式如下

7.根据最新的需求要求二级和三级的模块宽度要统一

此时需要一个框架的方法renderContent用于自定义树节点的渲染内容

在vue-org-tree组件中，renderContent方法是一个重要的功能，允许开发者自定义树节点的显示内容。该方法通常接受两个参数：h和data。h是Vue的渲染函数，用于创建虚拟DOM节点；data是当前节点的数据对象。

<vue2-org-tree :data="data" :label-class-name="labelClassName" :renderContent="renderContent"></vue2-org-tree>

renderContent(h, data) {
    if(data.level == 1){
        return (
            <div class='childF'>
            	{data.label}
    		</div>
    	);
	}else if(data.level == 2){
    	return (
        	<div class='childS'>
        		{data.label}
			</div>
		);
	}else if(data.level == 3){
    	return (
        	<div class='childT'>
        		{data.label}
			</div>
		);
	}
}

.org-tree-node-label-inner:has(.childF){
    border-radius: 10px;
    background-color: rgba(42, 130, 228, 1);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 1);
    width: 200px;
}
.org-tree-node-label-inner:has(.childS){
    width: 120px;
}
.org-tree-node-label-inner:has(.childT){
    width: 12px;
    height: 200px;
}

此时页面的样式如下

8.截止目前为止样式已经OK了，但是需求又要新的要求，需要多加鼠标移入有二态的功能

需求：鼠标移入二级时，整个二级模块添加新的样式；

鼠标移入三级时，只是当前节点添加新的样式

查看官网：创建有提供移入移除的方法：@on-node-mouseover、@on-node-mouseout

①安装jQuery插件

npm i jquery

②添加鼠标移入的样式

.active{
    background-color: rgba(42, 130, 228, 1);
    color: #fff !important;
    cursor: pointer;
}

③在项目中引入jQuery

import $ from 'jquery'

④添加移入移除的方法

<vue2-org-tree :data="data" :label-class-name="labelClassName" :renderContent="renderContent" @on-node-mouseover="onMouseover" 
@on-node-mouseout="onMouseout"></vue2-org-tree>

⑤获取节点添加移除样式

onMouseover(e, data){
    let flag = $(e.target).hasClass('org-tree-node-label-inner bg-color-orange')
    if(flag){
        $(e.target).addClass('active')
        $(e.target).closest(".org-tree-node").find('.org-tree-node-label-inner').addClass('active');
        console.log('1',$(e.target).closest(".org-tree-node").find('.org-tree-node-label-inner'))
    }
},
onMouseout(e, data){
    $(e.target).removeClass('active')
    $(e.target).closest(".org-tree-node").find('.org-tree-node-label-inner').removeClass('active');
}

---

🌟 关于我 🌟

你好呀，感谢一直陪伴在这里的你！我是程序媛‘小帅哥’。在这里，我致力于分享前端领域的知识点，希望能为你的工作与生活带来一丝灵感与帮助。

💼 服务承接 💼

如果你也喜欢我的内容，或者正在寻找前端或者后端方面的帮助，那么请不要犹豫，联系我吧！我都愿意倾听你的想法，共同探索更多可能。

欢迎关注微信公众号：自学PS转前端