组织结构：Vue 组件 org-tree 深度解析

组织结构图、文件目录树、部门层级… 在前端应用中，处理和展示树状（Hierarchical）数据是一项非常普遍的需求。今天，我们来深入了解一个专为 Vue 设计、能够简洁而优雅地渲染复杂组织结构图的组件——org-tree。

🚀 为什么开发 org-tree？

该项目是基于https://github.com/hukaibaihu/vue-org-tree.git代码进行二开的，兼容了vue2和vue3，由于原作者并为将该项目兼容vue3，所以进行重写了一遍，本来在npmjs上有一个vue3-org-tree的，无奈该该项目不开源，并且该插件在我的项目下总是报错无法得到解决，所以开发了org-tree这个项目。

有哪些功能

该项目只实现了最基础的树状显示功能以及横向树，更多其他功能还没有时间去处理。

怎么使用

1. 安装

# vue2 
yarn add @liushuai05/org-tree@vue2 # 或者 yarn add @liushuai05/org-tree@latest
# vue3 
yarn add @liushuai05/org-tree@vue3

2. 示例

org-tree 的数据结构设计非常直观，通常只需要一个 JSON 对象即可定义整个组织结构。开发者无需关注复杂的 DOM 操作和布局计算，只需维护好数据的层级关系，即可自动渲染出美观的组织结构图。

vue2

// vue2 详情参考 vue2-example 目录  ，但引入参考如下
<template>
<div>
  <div>关系树</div>
  <div>
    <div class="page-content">
      <!-- <vue2-org-tree :data="data" collapsable @on-node-click="NodeClick" @on-expand="onExpand" :render-content="renderContent"  initOrg /> -->
      <OrgTree
        :data="data"
        collapsable
        @on-expand="onExpand"
        :render-content="renderContent"
        initOrg
      />
    </div>
  </div>
  </div>
</template>

<script>
// vue2 详情参考 vue2-example 目录 ，但引入参考如下
import OrgTree from '@liushuai05/org-tree';
import '@liushuai05/org-tree/dist/org-tree.css';

  export default {
    data: function () {
      return {
        data:{
				  id: 1,
				  label: '公司董事会',
				  children: [
				    {
				      id: 2,
				      label: '总经理办公室',
				      children: [
				        { id: 4, label: '人事部' },
				        { id: 5, label: '技术部' }
				      ]
				    },
				    { id: 3, label: '财务部' }
				  ]
				}
			}
		}
	}
</script>

vue3

<template>
  <div>关系树</div>
  <div>
    <div class="page-content">
      <!-- <vue2-org-tree :data="data" collapsable @on-node-click="NodeClick" @on-expand="onExpand" :render-content="renderContent"  initOrg /> -->
      <OrgTree
        :data="treeData"
        collapsable
        @on-expand="onExpand"
        :horizontal="true"
        :render-content="renderContent"
        initOrg
      />
    </div>
  </div>
</template>
<script setup>
   
// vue3 详情参考 vue3-example 目录 ，但引入参考如下
import OrgTree from '@liushuai05/org-tree';
import '@liushuai05/org-tree/dist/org-tree.css';


// 示例数据结构
const treeData = {
  id: 1,
  label: '公司董事会',
  children: [
    {
      id: 2,
      label: '总经理办公室',
      children: [
        { id: 4, label: '人事部' },
        { id: 5, label: '技术部' }
      ]
    },
    { id: 3, label: '财务部' }
  ]
};
</script>