概要

組織図をVue.jsを使って表示してくれるライブラリがないか調べてみたところ
vue-organization-chartという良さそうなライブラリがあったので
試しに使ってみました。

以下のようなチャートを簡単に表示することができました。（各ノードはカスタマイズ可能）

実装

インストール

% yarn add vue-organization-chart

画面実装

• TreeChart.vue として作成します。

<template>
  <div>
    <organization-chart
      :datasource="value"
      :pan="true"
      :zoom="false"
    ></organization-chart>
  </div>
</template>

<script>
import OrganizationChart from 'vue-organization-chart'
import 'vue-organization-chart/dist/orgchart.css'
export default {
  components: {
    OrganizationChart
  },
  props: {
    value: {
      type: Object,
      default: () => {
        return {
          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>

• ページ側では、以下のように呼び出します。

<template>
  <div>
    <tree-chart></tree-chart>
  </div>
</template>

<script>
import TreeChart from '~/components/TreeChart'
export default {
  components: {
    TreeChart
  }
}
</script>

その他

• CSSを上書きすることで、組織図の見た目を変更できます。
• 各ノードの部分は以下のようにして、マークアップを変更できます。

<organization-chart
  :datasource="value"
  :pan="true"
  :zoom="false"
>
  <template slot-scope="{ nodeData }">
    <!-- feel free to customize the internal structure of node -->
    <div class="my-node-body">
      <div class="my-node-title">{{ nodeData.title }}</div>
    </div>
  </template>
</organization-chart>

以上になります。