Organization-Chart-Vue3

DEMO |

A Vue3 component to display organization chart

Install

1npm i organization-chart-vue3 --save

Usage

in template:

1<OrganizationChart :data="orgData" @click-node="clickNode" />

in script:

1import OrganizationChart from "organization-chart-vue3";
2import "organization-chart-vue3/dist/style.css";
3
4export default {
5    components: {
6        OrganizationChart
7    },
8    data() {
9        return {
10            orgData: {
11                ...
12            }
13        }
14    },
15    ...
16}

Event

Click (node)

1Click on the node triggered, receive the current node data as a parameter
2
3If click on the title, you can get all the data of the node.
4If click on the member, you can get the data of the member.

Prop

data

Component data to support those field：

1- title[String] to display a organization title
2- member[String] to display a organization member
3  - name[String] to display a organization member name
4  - add[String] to display a organization member additional info
5  - image_url[String] to display a organization member image
6- children[Array] to display a organization children
7- titleClass[String, Array<String>] to input organization title class
8- contentClass[String, Array<String>] to input organization content class

Example：

1const orgData = {
2  title: "CEO",
3  member: [
4    {
5      name: "Oliver",
6      image_url:
7        "https://github.com/LeeJams/LeeJams.github.io/blob/master/assets/img/user.jpg?raw=true",
8    },
9  ],
10  children: [
11    {
12      title: "MANAGEMENT",
13      member: [
14        {
15          name: "Jake",
16          add: "Junior Staff",
17          image_url:
18            "https://github.com/LeeJams/LeeJams.github.io/blob/master/assets/img/user.jpg?raw=true",
19        },
20        {
21          name: "Noah",
22          add: "Senior Staff",
23          image_url:
24            "https://github.com/LeeJams/LeeJams.github.io/blob/master/assets/img/user.jpg?raw=true",
25        },
26        {
27          name: "James",
28          add: "Senior Manager",
29          image_url:
30            "https://github.com/LeeJams/LeeJams.github.io/blob/master/assets/img/user.jpg?raw=true",
31        },
32      ],
33    },
34    {
35      title: "DEVELOPMENT",
36      member: [
37        {
38          name: "Emma",
39          add: "CTO",
40          image_url:
41            "https://github.com/LeeJams/LeeJams.github.io/blob/master/assets/img/user.jpg?raw=true",
42        },
43      ],
44      children: [
45        {
46          title: "FRONTEND",
47          titleClass: "frontend-title",
48          contentClass: "frontend-content",
49          member: [
50            {
51              name: "David",
52              add: "Senior Staff",
53            },
54            {
55              name: "Ava",
56              add: "Senior Staff",
57            },
58            {
59              name: "Sophia",
60              add: "Senior Staff",
61            },
62          ],
63        },
64        {
65          title: "BACKEND",
66          titleClass: "backend-title",
67          contentClass: "backend-content",
68          member: [
69            {
70              name: "Kyle",
71              add: "Senior Staff",
72            },
73            {
74              name: "Richard",
75              add: "Senior Staff",
76            },
77            {
78              name: "Daniel",
79              add: "Senior Staff",
80            },
81          ],
82        },
83      ],
84    },
85    {
86      title: "DESIGN",
87      member: [
88        {
89          name: "Jacob",
90          add: "Senior Staff",
91        },
92      ],
93    },
94    {
95      title: "MARKETING",
96    },
97    {
98      title: "SALES",
99      children: [
100        {
101          title: "SALES A TEAM",
102        },
103        {
104          title: "SALES B TEAM",
105        },
106      ],
107    },
108  ],
109};

1.backend-title {
2  background-color: #66abd3;
3  color: #fff;
4}
5.backend-content {
6  text-align: center;
7}
8.frontend-title {
9  background-color: #333;
10  color: #fff;
11}
12.frontend-content {
13  text-align: center;
14}
15/* Or you can use ::v-deep */

Copyright (c) 2023-present, LeeJam