vue实现思维导图或者组织架构图效果

实现组织架构图

1.安装vue前端依赖包

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 Vue2OrgTree from 'vue-tree-color'
Vue.use(Vue2OrgTree) 

4.在组件中引用

<template>
  <div class="hello">
    <div class="org_tree_div" ref="org_tree_content">
      <vue2-org-tree
        :data="data"
        :horizontal="true"
        :label-class-name="labelClassName"
        collapsable
        @on-expand="onExpand"
        @on-node-click="NodeClick"
        :renderContent="renderContent"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      labelClassName: "bg-color-orange",
      data: {
        id: 0,
        label: "XXX科技有限公司",
        number: 40,
        children: [
          {
            id: 2,
            label: "产品研发部",        
			number: 25,
            children: [
              {
                id: 5,
                label: "研发-前端",        
				number: 4,
              },
              {
                id: 6,
                label: "研发-后端",        
				number: 4,
              },
              {
                id: 9,
                label: "UI设计",        
				number: 2,
              },
              {
                id: 10,
                label: "产品经理",        
				number: 15,
              },
            ],
          },
          {
            id: 3,
            label: "销售部",        
			number: 10,
            children: [
              {
                id: 7,
                label: "销售一部",        
				number: 5,
              },
              {
                id: 8,
                label: "销售二部",        
				number: 5,
              },
            ],
          },
          {
            id: 4,
            label: "财务部",        
			number: 3,
          },
          {
            id: 9,
            label: "HR人事",        
			number: 2,
          },
        ],
      },
	  currentUnit: "人",
    };
  },
  methods: {
    renderContent(h, data) {
        return (
          <div class="content_div">
            <div class="title">{data.label}</div>
            <div class="detail">
              人员：{data.number}
              {this.currentUnit}
            </div>
          </div>
        );
    },
    //点击节点
    NodeClick(e, data) {
      console.log(e, data);
    },
    //默认展开
    toggleExpand(data, val) {
      if (Array.isArray(data)) {
        data.forEach((item) => {
          this.$set(item, "expand", val);
        });
      } else {
        this.$set(data, "expand", 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);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.hello {
  width: 100vw;
  height: 100vh;
}

.org_tree_div {
  width: 100%;
  height: 100%;
}

.org_tree_content {
  width: 100%;
  height: calc(100vh - 280px);
  overflow: auto;

  .org_tree_div {
    display: inline-block;
    min-width: 100%;
    min-height: calc(100vh - 280px);
  }
}
.org_tree_content {
  width: 100%;
  height: calc(100vh - 280px);
  overflow: auto;
  .org_tree_div {
    display: inline-block;
    min-width: 100%;
    min-height: calc(100vh - 280px);
  }
}

.org-tree-container {
  background: transparent;
}

/deep/ .org-tree-node-label .org-tree-node-label-inner {
  width: 180px;
  height: 100%;
  background-color: #aaaa00;
  position: relative;
    .title {
      color: #ffffff;
      font-weight: bold;
      overflow: hidden; //溢出内容隐藏
      text-overflow: ellipsis; //文本溢出部分用省略号表示
      line-clamp: 2;
    }
    .detail {
	  color: #ffffff;
      word-break: break-all;
    }
</style>

属性介绍

1. horizontal 是水平排列方式，它的参数是true、false
   效果图分别如下：
   
2. label-class-name 动态绑定自定义class
3. 默认折叠展示collapsable
4. 展开@on-expand="onExpand"
5. 默认展开，设置函数toggleExpand()在获取到数据后调用就可以实现默认展开的设置

// 第一个参数为数据data，第二个参数为是否全部展开
toggleExpand(data, val) {
    var _this = this;
    if (Array.isArray(data)) {
        data.forEach(function(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);
        }
    }
}

6. 点击事件@on-node-click="NodeClick"

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

7. 移入/移出事件@on-node-mouseover="onMouseover"/ @on-node-mouseout="onMouseout"返回值与点击事件大致相同
8. renderContent如何渲染节点标签

可以对样式进行调整，得到自己想要得的效果。
比如我想要调整展开收起的按钮显示，或者想在展开线上展示额外的数据；可以调整 renderContent的返回值和样式，比如下面的展示将展开收起按钮由圆形调整为方形，在展开线上加上了奖金的数据展示。

本文参考了大神的文章，根据自己的项目做了改动，这里就不展示实际项目的效果图了。