组织结构图

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

导入 #


import OrganizationChart from 'primevue/organizationchart';

基本 #

组织结构图需要一个 TreeNode 实例集合作为 value。

阿根廷

克罗地亚

法国

摩洛哥


<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，则可以禁用特定节点的选择。

艾米·埃尔斯纳首席执行官

安娜·法利首席营销官

销售

营销

斯蒂芬·肖首席技术官

开发

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 选项配置特定节点的样式。