### Install vue3-tree-org with npm or yarn

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/docs/guide/README.md

Use npm or yarn to install the package. This is recommended for better integration with build tools like webpack and ES6.

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

--------------------------------

### Install vue3-tree-org with Yarn

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/dist/index.html

Use this command to add vue3-tree-org to your project when using Yarn as your package manager.

```bash
yarn add vue3-tree-org
```

--------------------------------

### Install vue3-tree-org with NPM

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/dist/index.html

Use this command to add vue3-tree-org to your project when using NPM as your package manager.

```bash
npm install -S vue3-tree-org
```

--------------------------------

### Basic Tree Structure Example

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/dist/demo/index.html

Demonstrates the basic data structure required to generate an organizational tree. Ensure nodes have 'id' and 'pid' for drag/edit functionality, or configure via props.

```javascript
const data = [
  {
    id: 1,
    pid: 0,
    label: 'CEO',
    expand: true,
    children: [
      {
        id: 2,
        pid: 1,
        label: 'VP of Engineering',
        children: [
          {
            id: 3,
            pid: 2,
            label: 'Lead Engineer',
            children: []
          }
        ]
      },
      {
        id: 4,
        pid: 1,
        label: 'VP of Marketing',
        children: []
      }
    ]
  }
];
```

--------------------------------

### Install vue3-tree-org with npm or yarn

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/README.md

Use npm or yarn to add the vue3-tree-org package to your project dependencies.

```bash
npm install vue3-tree-org --save
```

```bash
yarn add vue3-tree-org
```

--------------------------------

### Font Class Icon Styles

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/lib/iconfont/demo_index.html

These are example CSS class names generated for specific icons when using the font-class method. Use them with the 'treefont' font-family.

```css
.icon-copy
```

```css
.icon-code
```

```css
.icon-question
```

```css
.icon-fullscreen
```

```css
.icon-unfullscreen
```

```css
.icon-collapse
```

```css
.icon-expand
```

--------------------------------

### Implement Custom Node Operations in Vue3-Tree-Org

Source: https://context7.com/sangtian152/vue3-tree-org/llms.txt

Define custom behaviors for node add, delete, edit, and copy operations using corresponding props. This example demonstrates custom prompts and clipboard interactions.

```vue
<template>
  <div style="height: 500px;">
    <vue3-tree-org
      :data="data"
      :disabled="false"
      :node-add="handleNodeAdd"
      :node-delete="handleNodeDelete"
      :node-edit="handleNodeEdit"
      :node-copy="handleNodeCopy"
      @on-node-delete="onNodeDelete"
      @on-node-copy="onNodeCopy"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {
        id: 1,
        label: '根节点',
        children: [
          { id: 2, pid: 1, label: '子节点1' },
          { id: 3, pid: 1, label: '子节点2' }
        ]
      }
    }
  },
  methods: {
    // 自定义新增节点
    handleNodeAdd(node) {
      console.log('自定义新增，父节点:', node)
      // 弹出自定义对话框
      const newLabel = prompt('请输入新节点名称:', '新节点')
      if (newLabel) {
        if (!node.children) {
          node.children = []
        }
        node.children.push({
          id: Date.now(),
          pid: node.id,
          label: newLabel
        })
      }
    },

    // 自定义删除节点
    handleNodeDelete(node) {
      console.log('自定义删除:', node)
      if (confirm(`确定要删除 "${node.label}" 吗?`)) {
        // 执行删除逻辑
        this.removeNode(this.data, node.id)
      }
    },

    // 自定义编辑节点
    handleNodeEdit(node) {
      console.log('自定义编辑:', node)
      const newLabel = prompt('请输入新名称:', node.label)
      if (newLabel) {
        node.label = newLabel
      }
    },

    // 自定义复制节点
    handleNodeCopy(node) {
      console.log('自定义复制:', node)
      navigator.clipboard.writeText(JSON.stringify(node, null, 2))
      alert('节点数据已复制到剪贴板')
    },

    // 递归删除节点
    removeNode(data, id) {
      if (data.children) {
        const index = data.children.findIndex(item => item.id === id)
        if (index > -1) {
          data.children.splice(index, 1)
          return true
        }
        for (const child of data.children) {
          if (this.removeNode(child, id)) return true
        }
      }
      return false
    },

    // 默认删除事件（未设置node-delete时触发）
    onNodeDelete(node) {
      console.log('节点已删除:', node)
    },

    // 默认复制事件（未设置node-copy时触发）
    onNodeCopy(text) {
      console.log('已复制文本:', text)
    }
  }
}
</script>
```

--------------------------------

### Font Class Icon Selectors

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/lib/iconfont/demo_index.html

These are example CSS selectors for specific icons when using the font-class method. They target elements with the 'icon-' prefix.

```css
#icon-copy
```

```css
#icon-code
```

```css
#icon-question
```

```css
#icon-fullscreen
```

```css
#icon-unfullscreen
```

```css
#icon-collapse
```

```css
#icon-expand
```

--------------------------------

### Customizing Nodes and Context Menus

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/docs/demo/README.md

Explains how to customize the appearance and behavior of nodes, including using slots for custom rendering and defining custom right-click context menus.

```APIDOC
## Customizing Nodes and Context Menus

### Description
This section details how to customize the rendering of nodes and the context menu that appears on right-clicking a node.

### Custom Node Rendering
- **Slots**: Use the `default` slot for custom node content and the `expand` slot for custom expand buttons.
- **`render-content` Attribute**: A function that can be used to customize the node's content rendering. This function should return the desired node content.

### Custom Context Menu
- **`define-menus` Attribute**: Customize the right-click context menu by providing an array of objects, each with `name` (menu item text) and `command` (event identifier) properties.
- **`on-contextmenu` Event**: Define the event handler for context menu actions. Ensure `command` values are unique to avoid conflicts.

### Attributes
- **define-menus** (Array, Function) - Defines custom context menu items. Defaults to `[{ name: '复制文本', command: 'copy' },{ name: '新增节点', command: 'add' },{ name: '编辑节点', command: 'edit' },{ name: '删除节点', command: 'delete' }]`.
- **render-content** (Function) - A function to customize node content rendering.
- **label-style** (Object) - Custom styles for the label.
- **label-class-name** ([Function, String]) - Custom class names for the label.
- **selected-key** ([Array, Number, String]) - The ID of the selected node or an array of IDs.
- **selected-class-name** ([Function, String]) - Custom class name for the selected node.
```

--------------------------------

### Basic Usage of Vue3 Tree Org

Source: https://context7.com/sangtian152/vue3-tree-org/llms.txt

Demonstrates the basic usage of the Vue3 Tree Org component with sample data, enabling horizontal layout, collapsable nodes, and event handlers.

```vue
<template>
  <div style="height: 500px;">
    <vue3-tree-org
      :data="data"
      :horizontal="true"
      :collapsable="true"
      :label-style="labelStyle"
      :only-one-node="false"
      :clone-node-drag="true"
      center
      @on-node-click="onNodeClick"
      @on-node-dblclick="onNodeDblclick"
      @on-expand="onExpand"
      @on-contextmenu="onContextmenu"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {
        id: 1,
        label: 'xxx科技有限公司',
        children: [
          {
            id: 2,
            pid: 1,
            label: '产品研发部',
            style: { color: '#fff', background: '#108ffe' },
            children: [
              { id: 6, pid: 2, label: '前端开发组' },
              { id: 7, pid: 2, label: '后端开发组' },
              { id: 8, pid: 2, label: '测试组' }
            ]
          },
          {
            id: 3,
            pid: 1,
            label: '客服部',
            children: [
              { id: 11, pid: 3, label: '客服一部' },
              { id: 12, pid: 3, label: '客服二部' }
            ]
          },
          { id: 4, pid: 1, label: '业务部' },
          { id: 5, pid: 1, label: '财务部' }
        ]
      },
      labelStyle: {
        background: '#fff',
        color: '#5e6d82'
      }
    }
  },
  methods: {
    onNodeClick(e, data) {
      console.log('节点点击:', data.label)
    },
    onNodeDblclick(e, data) {
      console.log('节点双击:', data.label)
    },
    onExpand(e, data) {
      console.log('节点展开/收起:', data)
    },
    onContextmenu({ node, command }) {
      console.log('右键菜单:', command, node)
    }
  }
}
</script>
```

--------------------------------

### Basic Tree Usage

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/docs/demo/README.md

Set data in a specific format to generate a tree organizational chart. Use 'style' for node styling or 'className' for node classes.

```javascript
{
  id: '0-1',
  pid: '0',
  label: 'Node 1',
  expand: true,
  children: [
    {
      id: '0-1-1',
      pid: '0-1',
      label: 'Node 1-1',
      children: []
    }
  ]
}
```

--------------------------------

### Tool Bar Configuration

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/dist/demo/index.html

Enable and configure the toolbar for actions like scaling, restoring, expanding, zooming, and fullscreen using the 'toolBar' attribute. It can be a boolean or an object with specific options.

```javascript
<tree :toolBar="{ scale: false, fullscreen: true }"></tree>
```

--------------------------------

### Vue3 Tree Org - Basic Usage

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/dist/demo/index.html

Demonstrates the basic usage of the vue3-tree-org component with a simple data structure.

```APIDOC
## Basic Usage

Can set a similar data format to generate a tree organizational chart, and can precisely configure the style of each node through style or the class name of each node through className.

**Note:**
1. If you need to drag nodes, or add, edit, and delete nodes, the nodes must have `id` (unique node identifier) and `pid` (parent node unique identifier) properties, or specify `id` and `pid` properties through `props`.
2. Since the node drag-and-drop function prevents node text selection, a function to copy node text is provided in the right-click menu.
```

--------------------------------

### Basic Usage and Data Structure

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/docs/demo/README.md

Demonstrates the fundamental usage of the organization chart component and the required data format. It also highlights the conditions for enabling node dragging, adding, editing, and deleting functionalities.

```APIDOC
## Basic Usage

### Description
This section covers the basic setup and data structure required for the organization chart. It also outlines prerequisites for interactive features like node dragging, adding, editing, and deleting.

### Data Structure Notes
1. For drag, add, edit, and delete functionality, nodes must have `id` (unique identifier) and `pid` (parent identifier) properties. Alternatively, these can be specified via the `props` attribute.
2. Due to node dragging preventing text selection, a copy node text feature is provided in the context menu.

### Example
```javascript
// Example data structure
const data = [
  { id: 1, pid: 0, label: 'Root Node' },
  { id: 2, pid: 1, label: 'Child Node 1' },
  { id: 3, pid: 1, label: 'Child Node 2' }
];
```

### Attributes
- **data** (Object) - Data source, must be provided.
- **props** (Object) - Configuration options for node properties (e.g., `id`, `pid`, `label`, `expand`, `children`). Defaults to `{id: 'id', pid: 'pid', label: 'label', expand: 'expand', children: 'children'}`.
```

--------------------------------

### Custom Right-Click Menu Configuration

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/dist/demo/index.html

Configure custom right-click menus using the 'define-menus' attribute. Provide an array of objects, each with a 'name' and 'command'. The 'on-contextmenu' event can handle the command execution.

```javascript
const menus = [
  { name: 'Copy Text', command: 'copy' },
  { name: 'Add Node', command: 'add' },
  { name: 'Edit Node', command: 'edit' },
  { name: 'Delete Node', command: 'delete' }
];

// In template:
// <tree :define-menus="menus" @on-contextmenu="handleContextMenu"></tree>

// In methods:
// handleContextMenu({ event, node }) {
//   console.log('Context menu clicked for node:', node);
//   // Handle command based on event.target.dataset.command
// }
```

--------------------------------

### Methods

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/dist/demo/index.html

This section details the methods available for the vue3-tree-org component.

```APIDOC
## Methods

### filter

**Description**: Filter tree nodes.

**Parameters**: Accepts an arbitrary type of parameter, which will be passed as the first parameter to filter-node-method.

### getExpandKeys

**Description**: Get the array of currently expanded keys.

**Returns**: An array of node keys.

### setExpandKeys

**Description**: Set the array of expanded keys. Accepts an array of node keys as parameters.
```

--------------------------------

### Default Expanded Keys

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/dist/demo/index.html

Provide an array of node keys to 'default-expand-keys' to ensure these specific nodes are expanded by default when the tree is initialized.

```javascript
<tree :default-expand-keys="['node-1', 'node-5']"></tree>
```

--------------------------------

### Methods

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/docs/demo/README.md

This section describes the methods available on the Vue3 Tree Org component.

```APIDOC
## Methods

### filter

#### Description
Performs a filter operation on the tree nodes.

#### Parameters
- **any** - The parameter passed to the `filter-node-method`.

#### Returns
- **void**

### getExpandKeys

#### Description
Retrieves the keys of the currently expanded nodes.

#### Returns
- **Array<string|number>** - An array of node keys that are currently expanded.

### setExpandKeys

#### Description
Sets the expanded state of nodes based on an array of keys.

#### Parameters
- **Array<string|number>** - An array of node keys to be expanded.
```

--------------------------------

### Customize Context Menu with define-menus

Source: https://context7.com/sangtian152/vue3-tree-org/llms.txt

Customize context menu items using the `define-menus` prop, which accepts either an array of menu items or a function to dynamically generate menus based on node data. The `@on-contextmenu` event handler processes the selected menu command.

```vue
<template>
  <div style="height: 500px;">
    <vue3-tree-org
      :data="data"
      :define-menus="defineMenus"
      @on-contextmenu="handleContextmenu"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {
        id: 1,
        label: '根节点',
        children: [
          { id: 2, pid: 1, label: '普通节点' },
          { id: 3, pid: 1, label: '禁用节点', disabled: true }
        ]
      }
    }
  },
  methods: {
    // 动态返回菜单（根据节点状态返回不同菜单）
    defineMenus(e, node) {
      if (node.disabled) {
        // 禁用节点只显示复制菜单
        return [
          { name: '复制', command: 'copy' }
        ]
      }
      // 普通节点显示完整菜单
      return [
        { name: '复制', command: 'copy' },
        { name: '新增子节点', command: 'add' },
        { name: '编辑', command: 'edit' },
        { name: '删除', command: 'delete' },
        { name: '查看详情', command: 'detail' },
        { name: '导出', command: 'export' }
      ]
    },

    // 也可以使用静态数组
    // defineMenus: [
    //   { name: '复制', command: 'copy' },
    //   { name: '新增', command: 'add' },
    //   { name: '编辑', command: 'edit' },
    //   { name: '删除', command: 'delete' }
    // ],

    handleContextmenu({ node, command }) {
      switch (command) {
        case 'copy':
          console.log('复制节点:', node.label)
          break
        case 'add':
          console.log('新增子节点:', node)
          break
        case 'edit':
          console.log('编辑节点:', node)
          break
        case 'delete':
          console.log('删除节点:', node)
          break
        case 'detail':
          console.log('查看详情:', node)
          break
        case 'export':
          console.log('导出:', node)
          break
      }
    }
  }
}
</script>
```

--------------------------------

### Import vue3-tree-org in main.js

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/dist/guide/index.html

Import the component and its CSS in your main Vue application file. This makes the component globally available.

```javascript
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')
```

--------------------------------

### Import vue3-tree-org in main.js

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/docs/guide/README.md

Import the component and its CSS in your main Vue application file. This allows for global registration and usage.

```javascript
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')
```

--------------------------------

### Node Drag and Drop Configuration

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/docs/demo/README.md

Configure node dragging behavior using various attributes. Ensure nodes have 'id' and 'pid' properties for drag, add, edit, and delete functionalities.

```javascript
nodeDraggable: true,
cloneNodeDrag: true,
onlyOneNode: true,
draggableOnNode: false,
beforeDragEnd(node, targetNode) {
  // Return false or a rejected Promise to prevent drag
  return true;
}
```

--------------------------------

### Custom Node Rendering

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/docs/demo/README.md

Customize node and expand button rendering using 'default' and 'expand' slots. Alternatively, use the 'renderContent' function for custom node content.

```javascript
<template #default="{ node }" >
  <span >{{ node.label }}</span>
</template>
```

```javascript
<template #expand="{ node }" >
  <span >{{ node.label }}</span>
</template>
```

```javascript
renderContent(h, { node, data }) {
  return h('span', {
    style: { color: 'red' },
    onClick: () => console.log(data)
  }, [node.label]);
}
```

--------------------------------

### Custom Node Rendering with renderContent Function

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/dist/demo/index.html

Define a 'renderContent' function to customize node rendering. This function should return the desired content for the node. Note that slots have higher priority.

```javascript
renderContent: (node) => {
  return (
    <div style="padding: 5px;">
      <span style="color: #007bff;">{node.label}</span>
    </div>
  );
}
```

--------------------------------

### Scalable Architecture Diagram

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/dist/demo/index.html

Enable zooming and scaling of the architecture diagram by setting the 'scalable' attribute to true. This is useful for large or complex trees.

```javascript
<tree :scalable="true"></tree>
```

--------------------------------

### Node Drag and Drop Configuration

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/docs/demo/README.md

Details the attributes related to enabling and configuring node dragging behavior, including restrictions and event hooks.

```APIDOC
## Node Drag and Drop Configuration

### Description
This section describes the attributes used to control and customize the drag-and-drop functionality for nodes within the organization tree.

### Drag and Drop Attributes
- **`draggable`** (Boolean): Enables or disables node dragging. Defaults to `true`.
- **`node-draggable`** (Boolean): Specifies if individual nodes are draggable. Defaults to `true`.
- **`draggable-on-node`** (Boolean): If `node-draggable` is `false`, setting this to `true` enables dragging initiated on the node itself.
- **`clone-node-drag`** (Boolean): If `true`, dragging a node creates a clone. Defaults to `true`.
- **`only-one-node`** (Boolean): If `true`, only the currently dragged node is moved; its children are attached to the parent. If `false`, the node and its children are moved together. Defaults to `true`.
- **`before-drag-end`** (Function): A hook that runs before the drag-and-drop operation ends. If it returns `false` or a rejected Promise, the drag operation is canceled. Receives `(node, targetNode)` as arguments.

### Deprecated Drag Attributes (for versions prior to 4.0)
- **`node-drag-start`** (Function): Triggered when node dragging starts. Receives `node`.
- **`node-draging`** (Function): Triggered during node dragging. Receives `node`.
- **`node-drag-end`** (Function): Triggered when node dragging ends. Receives `(node, isSelf)`.

### Events (for versions 4.0+)
- **`on-node-drag-start`**: Event triggered when node dragging starts.
- **`on-node-drag`**: Event triggered during node dragging.
- **`on-node-drag-end`**: Event triggered when node dragging ends.

### Notes
- For drag, add, edit, and delete functionality, nodes must have `id` and `pid` properties, or these must be configured via `props`.
```

--------------------------------

### Include Font Class Stylesheet

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/lib/iconfont/demo_index.html

Link this CSS file in your HTML to enable the font-class icon method. Ensure the path to 'iconfont.css' is correct.

```html
<link rel="stylesheet" href="./iconfont.css">
```

--------------------------------

### Vue3 Tree Org - Lazy Loading Child Nodes

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/dist/demo/index.html

Explains how to implement lazy loading for child nodes.

```APIDOC
## Lazy Loading Child Nodes

Since data for the current level is fetched only when the node is clicked, Tree cannot predict whether a node is a leaf node by default. Therefore, an expand button is added to each node. If a node has no lower-level data, the expand button will disappear after clicking. At the same time, you can inform Tree in advance whether a node is a leaf node to avoid rendering a dropdown button before leaf nodes.

TIP
After enabling lazy loading, the default expand level (`default-expand-level`), the default expanded node array (`default-expand-keys`), and the toolbar's expand all button may behave abnormally. It is best to avoid using them.
```

--------------------------------

### Custom Context Menu

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/docs/demo/README.md

Customize the node context menu using the 'define-menus' attribute, which accepts an array of objects with 'name' and 'command' properties. Use the 'on-contextmenu' event for custom menu actions.

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

```javascript
onContextmenu({ event, node }) {
  console.log(node);
}
```

--------------------------------

### Vue3 Tree Org - Custom Node Rendering

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/dist/demo/index.html

Explains how to customize node rendering using slots or the `renderContent` function.

```APIDOC
## Custom Node Rendering

Nodes and expand buttons support customization. Use the `default` and `expand` slots to customize the rendering content of node text and expand buttons. You can also use `renderContent` to customize node rendering content. Specify the rendering function using `renderContent`. This function returns the content of the node area as needed. For the usage of rendering functions, please refer to the Vue documentation.

TIP
Slot priority is higher than renderContent.
```

--------------------------------

### Global Import in main.js

Source: https://context7.com/sangtian152/vue3-tree-org/llms.txt

Globally import the Vue3 Tree Org component and its CSS in your main Vue application file.

```javascript
import { createApp } from 'vue'
import App from './App.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')
```

--------------------------------

### Organization Tree Search and Lazy Loading

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/docs/demo/README.md

Covers features for searching nodes within the organization tree and implementing lazy loading for child nodes to improve performance with large datasets.

```APIDOC
## Organization Tree Search and Lazy Loading

### Description
This section explains how to implement search functionality to filter nodes in the organization tree and how to use lazy loading for efficient handling of large datasets.

### Organization Tree Search
- **`filter-node-method` Attribute**: A function that filters nodes. It receives `value` and `data` as arguments and should return `true` to display the node or `false` to hide it.

### Lazy Loading Sub-Nodes
- **`lazy` Attribute**: Set to `true` to enable lazy loading. This requires the `load` method to be used.
- **`load` Attribute**: A function that fetches child node data when a node is expanded. It receives `node` and `resolve` as arguments. This attribute is only effective when `lazy` is `true`.

### Attributes
- **filter-node-method** (Function) - Method for filtering tree nodes. Signature: `(value, data) => boolean`.
- **lazy** (Boolean) - Enables lazy loading of child nodes. Default is `false`.
- **load** (Function) - Function to load subtree data. Signature: `(node, resolve) => void`. Only effective when `lazy` is `true`.
- **default-expand-level** (Number) - The default level to expand nodes to.
- **default-expand-keys** (Array) - An array of keys for nodes that should be expanded by default.

### Notes on Lazy Loading
- When lazy loading is enabled, features like `default-expand-level` and `default-expand-keys` might behave unexpectedly. It's recommended to use them with caution.
```

--------------------------------

### Vue3 Tree Org - Custom Context Menu

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/dist/demo/index.html

Details how to customize the right-click context menu for nodes.

```APIDOC
## Custom Context Menu

The node right-click menu supports customization. Use the `define-menus` attribute to customize the right-click menu. It accepts an array of objects containing `name` (menu name) and `command` (event directive) properties.

TIP
Context menus can be defined through the `on-contextmenu` event. If `command` is the same, the event execution is the same, so avoid duplication.
```

--------------------------------

### Render Unicode Icon

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/lib/iconfont/demo_index.html

Use this HTML structure to display an icon by its Unicode character. Replace '&#x33;' with the specific character code for your desired icon.

```html
<span class="treefont">&#x33;</span>
```

--------------------------------

### Custom Node Rendering with Render Function

Source: https://context7.com/sangtian152/vue3-tree-org/llms.txt

Use the `render-content` prop with a render function to define custom node content. This allows for complex layouts including labels, positions, and interactive buttons. Ensure to use `h` from Vue for creating VNodes.

```vue
<template>
  <div style="height: 500px;">
    <vue3-tree-org
      :data="data"
      :render-content="renderContent"
      :collapsable="true"
    />
  </div>
</template>

<script>
import { h } from 'vue'

export default {
  data() {
    return {
      data: {
        id: 1,
        label: '张三',
        avatar: 'https://example.com/avatar1.png',
        position: 'CEO',
        children: [
          {
            id: 2,
            pid: 1,
            label: '李四',
            position: 'CTO',
            children: [
              { id: 4, pid: 2, label: '王五', position: '前端工程师' }
            ]
          },
          {
            id: 3,
            pid: 1,
            label: '赵六',
            position: 'CFO'
          }
        ]
      }
    }
  },
  methods: {
    renderContent(h, node) {
      return h('div', { class: 'custom-render-node' }, [
        h('div', { class: 'node-name' }, node.label),
        h('div', { class: 'node-position' }, node.position || '员工'),
        h('div', { class: 'node-actions' }, [
          h('button', {
            onClick: (e) => {
              e.stopPropagation()
              this.handleView(node)
            }
          }, '查看'),
          h('button', {
            onClick: (e) => {
              e.stopPropagation()
              this.handleEdit(node)
            }
          }, '编辑')
        ])
      ])
    },

    handleView(node) {
      console.log('查看:', node)
    },

    handleEdit(node) {
      console.log('编辑:', node)
    }
  }
}
</script>

<style>
.custom-render-node {
  padding: 8px;
  text-align: center;
}
.node-name {
  font-weight: bold;
  margin-bottom: 4px;
}
.node-position {
  font-size: 12px;
  color: #999;
  margin-bottom: 8px;
}
.node-actions button {
  margin: 0 4px;
  padding: 2px 8px;
  font-size: 12px;
}
</style>
```

--------------------------------

### Configuring Node Drag and Drop

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/dist/demo/index.html

Control node dragging behavior with 'draggable', 'draggable-on-node', 'node-draggable', 'clone-node-drag', and 'only-one-node' attributes. Use 'before-drag-end' for pre-drag validation.

```javascript
beforeDragEnd(node, targetNode) {
  // Example: Prevent dragging a node into itself
  if (node.id === targetNode.id) {
    return false;
  }
  return true;
}
```

--------------------------------

### Customizing Node Labels with Styles and Classes

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/dist/demo/index.html

Apply custom styles or class names to node labels using 'label-style' and 'label-class-name' attributes. These can be objects or functions for dynamic styling.

```javascript
labelClassName: (node) => {
  return node.data.isImportant ? 'important-label' : '';
}
```

--------------------------------

### Toolbar Configuration for Functionality Buttons

Source: https://context7.com/sangtian152/vue3-tree-org/llms.txt

Configure the toolbar to display or hide functional buttons such as zoom, restore, expand/collapse, and fullscreen. Setting 'toolBarConfig' to false hides the entire toolbar.

```vue
<template>
  <div style="height: 500px;">
    <vue3-tree-org
      :data="data"
      :tool-bar="toolBarConfig"
      @on-zoom="onZoom"
      @on-restore="onRestore"
      @on-expand-all="onExpandAll"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 工具栏配置
      toolBarConfig: {
        scale: true,      // 显示缩放按钮
        restore: true,    // 显示复原按钮
        expand: true,     // 显示展开/收起按钮
        zoom: true,       // 显示放大/缩小按钮
        fullscreen: true  // 显示全屏按钮
      },
      // 设为false则隐藏整个工具栏
      // toolBarConfig: false,
      data: {
        id: 1,
        label: '根节点',
        children: [
          { id: 2, pid: 1, label: '子节点1' },
          { id: 3, pid: 1, label: '子节点2' }
        ]
      }
    }
  },
  methods: {
    onZoom(scale) {
      console.log('当前缩放比例:', scale)
    },
    onRestore() {
      console.log('已复原')
    },
    onExpandAll(isExpand) {
      console.log('全部展开状态:', isExpand)
    }
  }
}
</script>
```

--------------------------------

### Configure Node Dragging

Source: https://context7.com/sangtian152/vue3-tree-org/llms.txt

Enable node dragging by setting the `node-draggable` prop to true. Use `clone-node-drag` for cloning nodes during drag and `only-one-node` to control single node dragging. Implement `before-drag-end` for custom validation before a drag operation completes.

```vue
<template>
  <div style="height: 500px;">
    <vue3-tree-org
      :data="data"
      :node-draggable="true"
      :clone-node-drag="true"
      :only-one-node="false"
      :before-drag-end="beforeDragEnd"
      @on-node-drag-start="onNodeDragStart"
      @on-node-drag="onNodeDrag"
      @on-node-drag-end="onNodeDragEnd"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {
        id: 1,
        label: '总部',
        children: [
          {
            id: 2,
            pid: 1,
            label: '部门A',
            children: [
              { id: 4, pid: 2, label: '员工1' },
              { id: 5, pid: 2, label: '员工2', noDragging: true } // 禁止拖拽
            ]
          },
          {
            id: 3,
            pid: 1,
            label: '部门B',
            children: [
              { id: 6, pid: 3, label: '员工3' }
            ]
          }
        ]
      }
    }
  },
  methods: {
    // 拖拽开始
    onNodeDragStart(node) {
      console.log('开始拖拽:', node.label)
    },

    // 拖拽中
    onNodeDrag(node) {
      console.log('正在拖拽:', node.label)
    },

    // 拖拽结束前的钩子，返回 false 或 reject 的 Promise 可阻止拖拽
    beforeDragEnd(node, targetNode) {
      return new Promise((resolve, reject) => {
        if (!targetNode) {
          console.log('目标节点不存在，取消拖拽')
          reject()
          return
        }
        if (node.id === targetNode.id) {
          console.log('不能拖拽到自身')
          reject()
          return
        }
        // 可以添加其他业务逻辑判断
        console.log(`将 ${node.label} 移动到 ${targetNode.label} 下`)
        resolve()
      })
    },

    // 拖拽结束
    onNodeDragEnd(node, targetNode) {
      console.log('拖拽结束:', node.label, '-> 目标:', targetNode?.label)
    }
  }
}
</script>
```

--------------------------------

### Props for Data Structure Configuration

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/dist/demo/index.html

Configure how the tree component interprets your data using the 'props' attribute. Specify the keys for node ID, parent ID, label, expand status, children, and leaf status.

```javascript
const customProps = {
  id: 'nodeId',
  pid: 'parentId',
  label: 'name',
  expand: 'isExpanded',
  children: 'subNodes',
  isLeaf: 'isLeafNode'
};

// In template:
// <tree :props="customProps"></tree>
```

--------------------------------

### Selecting Nodes

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/dist/demo/index.html

Specify selected nodes using 'selected-key' with a node ID or an array of IDs. Customize the appearance of selected nodes with 'selected-class-name'.

```javascript
<tree :selected-key="['node-1', 'node-3']" selected-class-name="my-selected-node"></tree>
```

--------------------------------

### Vue3 Tree Org - Props

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/dist/demo/index.html

Lists and describes the available props for configuring node data mapping.

```APIDOC
## Props

| Parameter | Description | Type | Optional Values | Default |
|---|---|---|---|---|
| label | Specifies the node label as a property of the node object | String | — | — |
| children | Specifies the subtree as a property of the node object | String | — | — |
| id | Specifies the unique node identifier as a property of the node object | String | — | — |
| pid | Specifies the parent node identifier as a property of the node object | String | — | — |
| expand | Specifies whether the node is expanded as a property of the node object | String | — | — |
| isLeaf | Specifies a key in the node object to determine if it is a leaf node (the value corresponding to this key should be of boolean type) | String | — | — |
```

--------------------------------

### Props Configuration

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/docs/demo/README.md

Configure how the tree component interprets node data using the 'props' attribute. This allows mapping custom property names for labels, children, IDs, and more.

```javascript
props: {
  id: 'nodeId',
  pid: 'parentNodeId',
  label: 'nodeLabel',
  expand: 'isExpanded',
  children: 'childNodes',
  isLeaf: 'isLeafNode'
}
```

--------------------------------

### Implement Lazy Loading for Child Nodes

Source: https://context7.com/sangtian152/vue3-tree-org/llms.txt

Use the 'lazy' and 'load' props to achieve on-demand loading of child node data. The 'load' prop accepts a function that receives the node and a resolve callback to provide the child data.

```vue
<template>
  <div style="height: 500px;">
    <vue3-tree-org
      :data="data"
      :props="props"
      lazy
      :load="loadChildren"
      :collapsable="true"
      @on-node-click="onNodeClick"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      props: {
        id: 'id',
        pid: 'pid',
        label: 'label',
        children: 'children',
        isLeaf: 'isLeaf' // 指定叶子节点判断字段
      },
      data: {
        id: 1,
        label: '根节点'
      }
    }
  },
  methods: {
    // 加载子节点数据
    loadChildren(node, resolve) {
      // 根据节点层级返回不同数据
      if (node.$$level === 0) {
        // 第一层
        return resolve([
          { id: 2, pid: 1, label: '一级节点-1' },
          { id: 3, pid: 1, label: '一级节点-2' }
        ])
      }

      if (node.$$level > 2) {
        // 超过3层返回空数组（叶子节点）
        return resolve([])
      }

      // 模拟异步请求
      setTimeout(() => {
        const children = [
          {
            id: `${node.id}-1`,
            pid: node.id,
            label: `子节点-${node.id}-1`,
            isLeaf: true // 标记为叶子节点，不显示展开按钮
          },
          {
            id: `${node.id}-2`,
            pid: node.id,
            label: `子节点-${node.id}-2`
          }
        ]
        resolve(children)
      }, 500)
    },

    onNodeClick(e, data) {
      console.log('点击节点:', data)
    }
  }
}
</script>
```

--------------------------------

### Events

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/dist/demo/index.html

This section details the various events emitted by the vue3-tree-org component.

```APIDOC
## Events

### on-expand

**Description**: Node expand event. When expanding a node, if the label click event is listened to, you need to stop propagation e.stopPropagation().

**Returns**: e, data

### on-expand-all

**Description**: Expand/collapse all event.

**Returns**: boolean

### on-node-click

**Description**: Node click event.

**Returns**: e, data

### on-node-dblclick

**Description**: Node double click event.

**Returns**: e, data

### on-node-focus

**Description**: Node focus event.

**Returns**: e, data

### on-node-blur

**Description**: Node blur event.

**Returns**: e, data

### on-node-copy

**Description**: Copy node text event. If the node-copy attribute is set, this event will not be triggered.

**Returns**: Copied text

### on-node-delete

**Description**: Delete node event. If the node-delete attribute is set, this event will not be triggered.

**Returns**: Deleted node

### on-node-drag-start

**Description**: Node drag start event. Added after version 4.0, replaces the original node-drag-start attribute.

**Returns**: node

### on-node-drag

**Description**: Node drag event. Added after version 4.0, replaces the original node-draging attribute.

**Returns**: node

### on-node-drag-end

**Description**: Node drag end event. Added after version 4.0, replaces the original node-drag-end attribute.

**Returns**: node, targetNode

### on-contextmenu

**Description**: Right-click context menu event.

**Returns**: {command, node}

### on-zoom

**Description**: Zoom event.

**Returns**: scale zoom multiple

### on-drag

**Description**: Drag event.

**Returns**: x, y

### on-drag-stop

**Description**: Drag stop event.

**Returns**: x, y
```

--------------------------------

### Custom Node Rendering with Slots

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/dist/demo/index.html

Utilize the 'default' and 'expand' slots to customize the rendering of nodes and their expand buttons. This offers more flexibility than the 'renderContent' function.

```vue
<template #default="{ node }" >
  <div class="custom-node">
    <i class="icon"></i>
    <span>{{ node.label }}</span>
  </div>
</template>
<template #expand="{ node }" >
  <span class="expand-icon">+</span>
</template>
```

--------------------------------

### Render Font Class Icon

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/lib/iconfont/demo_index.html

Apply both the base font-family class ('treefont') and the specific icon class (e.g., 'icon-xxx') to an element to display the icon.

```html
<span class="treefont icon-xxx"></span>
```

--------------------------------

### Universal Icon CSS for Symbol Method

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/lib/iconfont/demo_index.html

Apply this CSS to style SVG icons rendered using the Symbol method. It sets the icon's size, alignment, and color.

```css
<style>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
```

--------------------------------

### Slots

Source: https://github.com/sangtian152/vue3-tree-org/blob/v4.0.0/dist/demo/index.html

This section details the slots available for customizing the vue3-tree-org component.

```APIDOC
## Slot

### Default Slot

**Description**: Customize node content. The parameter is { node }.

### expand Slot

**Description**: Customize the node expand button content. The parameter is { node }.
```