@develop-plugins/org-chart v0.0.2

OrgChart

描述

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

安装

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

引用

import { OrgChartInstall } from '@develop-plugins/org-chart';
import '@develop-plugins/org-chart/style.css';

app.use(OrgChartInstall);

示例

<template>
  <OrgChart :data="data" @cell-click="handleCellClick"></OrgChart>
</template>
<script setup>
import { ref } from 'vue';

const data = ref({
  label: '科技有限公司',
  children: [
    {
      label: '产品研发部',
      children: [
        {
          label: '研发-前端',
          children: [{ label: '前端-1' }, { label: '前端-2' }],
        },
        { label: '研发-后端' },
        { label: 'UI设计' },
        { label: '产品经理' },
      ],
    },
    {
      label: '销售部',
      children: [
        { label: '销售-1', children: [{ label: '销售-1-1' }, { label: '销售-1-2' }] },
        { label: '销售-2' },
        { label: '销售-3' },
        { label: '销售-4' },
      ],
    },
    {
      label: '财务部',
      children: [
        { label: '财务-1' },
        { label: '财务-2' },
        { label: '财务-3' },
        { label: '财务-4' },
      ],
    },
    {
      label: 'HR人事',
    },
  ],
});
</script>

属性

插槽

事件