Vue 中使用 orgTree

1、安装 orgTree 和 less

npm i vue2-org-tree

// 建议版本为 5.0.0，不然可能会报错
npm install --save-dev less less-loader

2、main.js 引入并注册

import Vue from 'vue'
import Vue2OrgTree from 'vue2-org-tree'

Vue.use(Vue2OrgTree)

3、在组件内引入 less 文件，less 文件可以去 citHub 下载

<style lang="less">
	@import '/src/css/org-tree.less';
</style>

4、基础使用

<vue2-org-tree :horizontal="true" class="orgTree" style="position: absolute" id="imageWrapper" :data="data" @on-node-click="nodeClick" @on-node-mouseover="onMouseover" @on-node-mouseout="onMouseout" :label-class-name="labelClassName"/>

// 数据结构
data: {
    
    
  id: 0,
  label: "XXX科技有限公司",
  children: [
    {
    
    
      id: 2,
      label: "产品研发部",
      children: [
        {
    
    
          id: 5,
          label: "研发-前端"
        },
        {
    
    
          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人事"
    }
  ]
},

5、排列方式（水平排列），horizontal 是水平排列方式，我们来实践一下吧，它的参数是true、false

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

5、修改背景色，使用 label-class-name 我们还可以动态绑定自定义class

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

// css 警告⚠ ：style标签里不能加 scoped 不然自定义样式无效
.bg-color-orange{
    
    
    color: #fff;
    background-color: orange;
}

6、点击事件，on-node-click 就是被抛出的点击事件

<vue2-org-tree 
    :data="data" 
    @on-node-click="NodeClick"
/>

NodeClick(e,data){
    
    
    console.log(e)
    // e 为 event
    console.log(data)
    // 当前项的所有详情 如：id label children
}

7、移入移出

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

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

<!-- 创建浮窗盒子 -->
<div v-show="BasicSwich" class="floating">
    <p>ID:{
    
    {
    
    BasicInfo.id}}</p>
    <p>Name:{
    
    {
    
    BasicInfo.label}}</p>
</div>

// 声明变量
data() {
    
    
    return {
    
    
        BasicSwich:false,
        BasicInfo:{
    
    id:null,label:null}
    }
}
// 方法
onMouseout(e, data) {
    
    
    this.BasicSwich = false
},
onMouseover(e, data) {
    
    
    this.BasicInfo = data;
    this.BasicSwich = true;
    var floating =  document.getElementsByClassName('floating')[0];
    floating.style.left = e.clientX +'px';
    floating.style.top = e.clientY+'px';
},

/* 盒子css */
.floating{
    
    
    background: rgba(0, 0, 0, 0.7);
    width: 160px;
    height: 100px;
    position: absolute;
    color: #fff;
    padding-top: 15px;
    border-radius: 15px;
    padding-left: 15px;
    box-sizing: border-box;
    left:0;
    top: 0;
    transition: all 0.3s;
    z-index: 999;
    text-align: left;
    font-size: 12px;
}