OrganizationChart

OrganizationChartは、階層的な組織データを表す視覚化コンポーネントです。

インポート #


import OrganizationChart from 'primevue/organizationchart';

基本 #

OrganizationChartは、valueとしてTreeNodeインスタンスのコレクションを必要とします。

アルゼンチン

クロアチア

フランス

モロッコ


<OrganizationChart :value="data">
    <template #default="slotProps">
        <span>{{ slotProps.node.label }}</span>
    </template>
</OrganizationChart>

テンプレート #

OrganizationChartNodeのtypeプロパティは、ノードにテンプレートをマッピングするために使用されます。未定義の場合は、デフォルトテンプレートが使用されます。

アルゼンチン

クロアチア

フランス

モロッコ


<OrganizationChart :value="data" collapsible>
    <template #country="slotProps">
        <div class="flex flex-col items-center">
            <img :alt="slotProps.node.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`w-2rem flag flag-${slotProps.node.data}`" />
            <div class="mt-4 font-medium text-lg">{{ slotProps.node.label }}</div>
        </div>
    </template>
    <template #default="slotProps">
        <span>{{slotProps.node.data.label}}</span>
    </template>
</OrganizationChart>

選択 #

選択は、selectionModeを「single」または「multiple」に設定し、v-modelディレクティブでselectionKeysを指定することで有効になります。特定のノードの選択は、ノードインスタンスのselectableがfalseの場合、無効にすることができます。

Amy ElsnerCEO

Anna FaliCMO

営業

マーケティング

Stephen ShawCTO

開発

UI/UXデザイン


<OrganizationChart v-model:selectionKeys="selection" :value="data" collapsible selectionMode="multiple">
    <template #person="slotProps">
        <div class="flex flex-col">
            <div class="flex flex-col items-center">
                <img :alt="slotProps.node.data.name" :src="slotProps.node.data.image" class="mb-4 w-12 h-12" />
                <span class="font-bold mb-2">{{ slotProps.node.data.name }}</span>
                <span>{{ slotProps.node.data.title }}</span>
            </div>
        </div>
    </template>
    <template #default="slotProps">
        <span>{{ slotProps.node.label }}</span>
    </template>
</OrganizationChart>

カラー #

特定のノードのスタイル設定は、TreeNodeのstyleClassとstyleオプションで構成されます。