vue3-tree-org

vue3-tree-org is a lightweight organization chart component built for Vue 3.x. Key features include:

• Interactivity: Supports dragging nodes and zooming via mouse wheel.
• Node Management: Supports adding and deleting nodes, as well as editing node names.
• Structure Manipulation: Supports dragging nodes to change the tree structure.
• Customization:
  • Custom right-click menus.
  • Custom node rendering via slot.
  • Custom expand button rendering via slot.

To use the component globally, import the plugin and its required CSS file in your main.js (or equivalent entry point) and use app.use().

import { createApp } from 'vue'
import vue3TreeOrg from 'vue3-tree-org';
import "vue3-tree-org/lib/vue3-tree-org.css";

const app = createApp(App)

app.use(vue3TreeOrg)
app.mount('#app')

To improve performance with large datasets, you can enable lazy loading. When lazy is set to true, the tree will only load child data when a node is clicked.

Implementation Details:

• Set the lazy attribute to true.
• Provide a load function: Function(node, resolve). This function is responsible for fetching data and calling resolve(data) when finished.
• Note: When using lazy loading, it is recommended to avoid using default-expand-level, default-expand-keys, or the 'expand all' toolbar button, as they may behave unexpectedly.

<TreeOrg 
  :data="data" 
  lazy 
  :load="loadSubTree" 
/>

<script setup>
const loadSubTree = (node, resolve) => {
  // Fetch data from API
  fetch(`/api/children/${node.id}`).then(res => res.json()).then(data => {
    resolve(data);
  });
};
</script>

You can install the package using npm or yarn. Using npm is recommended for better compatibility with Webpack and ES6, and it supports on-demand (tree-shaking) imports.

npm i vue3-tree-org -S
# or 
yarn add vue3-tree-org

To use vue3-tree-org in your project, install the package using your preferred package manager (Yarn or NPM).

# Using Yarn
yarn add vue3-tree-org

# Using NPM
npm install -S vue3-tree-org

You can customize the right-click context menu using the defineMenus prop. This prop accepts either an array of menu objects or a function that returns an array.

Menu Object Format

Each menu item should be an object with:

• name: The display name of the menu item.
• command: The action identifier (e.g., 'copy', 'add', 'edit', 'delete').

Example: Using a function for dynamic menus

const customMenus = (e, node) => {
  return [
    { name: 'Custom Action', command: 'custom' },
    { name: 'Delete', command: 'delete' }
  ];
};

const menus = [{
  name: '复制文本',
  command: 'copy'
}, {
  name: '新增节点',
  command: 'add'
}, {
  name: '编辑节点',
  command: 'edit'
}, {
  name: '删除节点',
  command: 'delete'
}];

To generate an organizational tree, provide a data object. For features like dragging, adding, editing, or deleting nodes to work, each node must have a unique id and a pid (parent ID). You can map these fields using the props attribute.

Key Requirements:

• Node Identification: Nodes must have id and pid properties.
• Custom Mapping: Use the props object to specify which keys in your data represent id, pid, label, expand, and children.

Default props mapping: {id: 'id', pid: 'pid', label: 'label', expand: 'expand', children: 'children'}

// Example data structure
const data = {
  id: '1',
  label: 'Root',
  children: [
    { id: '2', pid: '1', label: 'Child 1' }
  ]
};

// Component usage
<TreeOrg :data="data" :props="{ id: 'id', pid: 'pid', label: 'label' }" />

Instead of using the renderContent prop, it is recommended to use scoped slots for custom node rendering. This allows you to use Vue components and templates directly within the tree nodes.

• default: Customizes the node's main content area.
• expand: Customizes the expansion/collapse button area.

<tree-org :data="treeData" :props="keys">
  <template #default="{ node }">
    <div class="custom-node">
      <img :src="node.avatar" />
      <span>{{ node.label }}</span>
    </div>
  </template>

  <template #expand="{ node }">
    <span class="my-custom-expand-icon">+</span>
  </template>
</tree-org>

The lib/vue3-tree-org.umd.js file provides a Universal Module Definition (UMD) build of the library. This allows you to use vue3-tree-org in various environments:

1. CommonJS/Node.js: Use require('vue3-tree-org').
2. AMD: Use define(['vue'], ...).
3. Browser Globals: If loaded via a <script> tag, the library is attached to the global object as window['vue3-tree-org'] (or root['vue3-tree-org']).

Note that this build requires vue as a dependency to function.

// CommonJS
const Vue3TreeOrg = require('vue3-tree-org');

// AMD
define(['vue'], function(Vue) {
  return require('vue3-tree-org');
});

// Browser Global
const Vue3TreeOrg = window['vue3-tree-org'];

To use vue3-tree-org in your Vue 3 application, install the package and use the install method via app.use(). This registers the Vue3TreeOrg component globally and installs the necessary core plugins required for the organizational chart functionality.

import { createApp } from 'vue'
import Vue3TreeOrg from 'vue3-tree-org'
import 'vue3-tree-org/dist/style.css' // Ensure styles are imported

const app = createApp(App)

// Register the plugin and the component
app.use(Vue3TreeOrg)

app.mount('#app')

You can register the library globally in your Vue application. When installed as a plugin, it attaches a $log utility to app.config.globalProperties, which can be used for styled console logging during development.

import { Vue3TreeOrg } from 'vue3-tree-org';
import { createApp } from 'vue';

const app = createApp(App);
app.use(Vue3TreeOrg);
app.mount('#app');