OrgChart

描述

组织图可视化分层组织数据。

安装

 # npm
 npm i @develop-plugins/org-chart
 
 # yarn
 yarn add @develop-plugins/org-chart
 
 # pnpm
 pnpm add @develop-plugins/org-char

引用

1import { OrgChartInstall } from '@develop-plugins/org-chart';
2import '@develop-plugins/org-chart/style.css';
3
4app.use(OrgChartInstall);

示例

1<template>
2  <OrgChart :data="data" @cell-click="handleCellClick"></OrgChart>
3</template>
4<script setup>
5import { ref } from 'vue';
6
7const data = ref({
8  label: '科技有限公司',
9  children: [
10    {
11      label: '产品研发部',
12      children: [
13        {
14          label: '研发-前端',
15          children: [{ label: '前端-1' }, { label: '前端-2' }],
16        },
17        { label: '研发-后端' },
18        { label: 'UI设计' },
19        { label: '产品经理' },
20      ],
21    },
22    {
23      label: '销售部',
24      children: [
25        { label: '销售-1', children: [{ label: '销售-1-1' }, { label: '销售-1-2' }] },
26        { label: '销售-2' },
27        { label: '销售-3' },
28        { label: '销售-4' },
29      ],
30    },
31    {
32      label: '财务部',
33      children: [
34        { label: '财务-1' },
35        { label: '财务-2' },
36        { label: '财务-3' },
37        { label: '财务-4' },
38      ],
39    },
40    {
41      label: 'HR人事',
42    },
43  ],
44});
45</script>

属性

参数	说明	类型	可选值	默认值
data	数据源	object	—
collapsible	是否可折叠	boolean	—	false
direction	显示方向，分为垂直或水平两个方向	string	`'vertical'	'horizontal'`

插槽

名称	说明
—	默认插槽
label	显示内容,参数为当前节点数据

事件

事件名称	说明	回调参数
cell-click	点击节点时触发	当前点击节点数据
expand	折叠节点时触发	当前点击节点数据