vue3-organization-chart

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

vue3-organization-chart

★ 19 Open GitHub ↗

It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart for vue3.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![OrgChart](https://raw.githubusercontent.com/AugustinRibreau/vue3-organization-chart/main/src/assets/logo.png)

## Foreword
- First of all, thank you very much for the excellent work of [dabeng](https://github.com/dabeng). I'm just adding my sauce to move the project to Vue3
- **It work's with VueJS 3 !**

# Installation
```  
npm install vue3-organization-chart --save  
```

# Demos
```  
Since codesandbox and jsfiddle can't get vue3 to work properly. I am currently developing a doc.  
```

# Usage
```html  
<template>
  <div>
    <organization-chart :datasource="ds"></organization-chart>
  </div>
</template>

# Attributes
<table>  
  <thead>  
    <tr><th>Name</th><th>Type</th><th>Required</th><th>Default</th><th>Description</th></tr>  
  </thead>  
  <tbody>  
    <tr>  
      <td>datasource</td><td>json</td><td>yes</td><td></td><td>datasource usded to build out structure of orgchart. It could be a json object.</td>  
    </tr>  
    <tr>  
      <td>pan</td><td>boolean</td><td>no</td><td>false</td><td>Users could pan the orgchart by mouse drag&drop if they enable this attribute.</td>  
    </tr>  
    <tr>  
      <td>zoom</td><td>boolean</td><td>no</td><td>false</td><td>Users could zoomin/zoomout the orgchart by mouse wheel if they enable this attribute.</td>  
    </tr>  
    <tr>  
      <td>zoomin-limit</td><td>number</td><td>no</td><td>7</td><td>Users are allowed to set a zoom-in limit.</td>  
    </tr>  
    <tr>  
      <td>zoomout-limit</td><td>number</td><td>no</td><td>0.5</td><td>Users are allowed to set a zoom-out limit.</td>  
    </tr>  
  </tbody>  
</table>

# Events
<table>  
  <thead>  
    <tr><th>Name</th><th>Parameters</th><th>Description</th></tr>  
  </thead>  
  <tbody>  
    <tr>  
      <td>node-click</td><td>node data</td><td>triggers when user clicks the node.</td>  
    </tr>  
  </tbody>  
</table>

# Scoped Slots
```html  
<template slot-scope="{ nodeData }">  
 </template>  
```

## Author

👤 **Augustin Ribreau**
* Website: https://augustinribreau.com/
* GitHub: [@augustinribreau](https://github.com/augustinribreau)

vue3-organization-chart

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README