組織圖

組織圖可視覺化階層式組織資料。

匯入 #


import OrganizationChart from 'primevue/organizationchart';

基本 #

組織圖需要一個 TreeNode 實例的集合作為 value。

阿根廷

克羅埃西亞

法國

摩洛哥


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

範本 #

組織圖節點的 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 Elsner執行長

Anna Fali行銷長

銷售

行銷

Stephen Shaw技術長

開發

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 選項配置特定節點的樣式。