jQuery Version
ES6 Version
Web Components Version
Angular Version -- the most space-saving solution
React Version
Foreword
- First of all, thanks a lot for wesnolte's great work
😊 -- jOrgChart. The thought that using nested tables to build out the tree-like orgonization chart is amazing. This idea is more simple and direct than its counterparts based on svg - Unfortunately, it's long time not to see the update of jOrgChart. on the other hand, I got some interesting ideas to add, so I choose to create a new repo.
Features
- For now, just static organization chart
Installation
npm install vue-organization-chart -S
Demos
Usage
<template>
<div>
<organization-chart :datasource="ds"></organization-chart>
</div>
</template>
<script>
import Vue from 'vue'
import OrganizationChart from 'vue-organization-chart'
import 'vue-organization-chart/dist/orgchart.css'
export default {
components: {
OrganizationChart
},
data () {
return {
ds: {
'id': '1',
'name': 'Lao Lao',
'title': 'general manager',
'children': [
{ 'id': '2', 'name': 'Bo Miao', 'title': 'department manager' },
{ 'id': '3', 'name': 'Su Miao', 'title': 'department manager',
'children': [
{ 'id': '4', 'name': 'Tie Hua', 'title': 'senior engineer' },
{ 'id': '5', 'name': 'Hei Hei', 'title': 'senior engineer',
'children': [
{ 'id': '6', 'name': 'Pang Pang', 'title': 'engineer' },
{ 'id': '7', 'name': 'Xiang Xiang', 'title': 'UE engineer' }
]
}
]
},
{ 'id': '8', 'name': 'Hong Miao', 'title': 'department manager' },
{ 'id': '9', 'name': 'Chun Miao', 'title': 'department manager' }
]
}
}
}
}
</script>Attributes
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| datasource | json | yes | datasource usded to build out structure of orgchart. It could be a json object. | |
| pan | boolean | no | false | Users could pan the orgchart by mouse drag&drop if they enable this attribute. |
| zoom | boolean | no | false | Users could zoomin/zoomout the orgchart by mouse wheel if they enable this attribute. |
| zoomin-limit | number | no | 7 | Users are allowed to set a zoom-in limit. |
| zoomout-limit | number | no | 0.5 | Users are allowed to set a zoom-out limit. |
Events
| Name | Parameters | Description |
|---|---|---|
| node-click | node data | triggers when user clicks the node. |
Scoped Slots
<template slot-scope="{ nodeData }">
<!-- feel free to customize the internal structure of node -->
</template>