PrimeVue OrgChart：如何将类型为device的叶子节点垂直列表展示？

要实现将类型为device的最终叶子节点以列表（表格行式）展示，核心是利用PrimeVue OrgChart的自定义节点插槽覆盖默认渲染逻辑，具体实现步骤如下：

1. 利用node插槽自定义节点渲染逻辑 #

OrgChart提供的node插槽允许完全自定义每个节点的内容，同时可访问当前节点的node数据对象。在模板中通过插槽判断节点类型与是否为叶子节点，切换渲染方式：

<OrganizationChart :value="treeData">
  <template #node="slotProps">
    <!-- 匹配device类型的最终叶子节点 -->
    <div v-if="slotProps.node.type === 'device' && (!slotProps.node.children || slotProps.node.children.length === 0)" 
         class="device-node-table">
      <div class="device-row">
        <span class="device-col">设备名称</span>
        <span class="device-col">{{ slotProps.node.label }}</span>
      </div>
      <div class="device-row">
        <span class="device-col">设备ID</span>
        <span class="device-col">{{ slotProps.node.id }}</span>
      </div>
      <!-- 可按需添加更多设备属性行 -->
    </div>
    <!-- 非目标节点渲染默认样式 -->
    <div v-else class="default-node">
      {{ slotProps.node.label }}
    </div>
  </template>
</OrganizationChart>

2. 添加样式实现表格行布局 #

默认OrgChart节点为水平单元格样式，需补充CSS让设备节点呈现垂直列表（表格行）效果：

.device-node-table {
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background-color: #fff;
  width: 220px;
}

.device-row {
  display: flex;
  padding: 6px 8px;
  border-bottom: 1px solid #f1f5f9;
}

.device-row:last-child {
  border-bottom: none;
}

.device-col:first-child {
  font-weight: 600;
  color: #475569;
  width: 80px;
}

.default-node {
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background-color: #fff;
  min-width: 120px;
}

3. 确保数据结构匹配要求 #

你的树形数据需包含type字段标识节点类型，示例数据结构如下：

const treeData = [
  {
    label: "研发部",
    children: [
      {
        label: "测试小组",
        children: [
          {
            label: "自动化测试机",
            id: "DEV-TEST-001",
            type: "device"
          },
          {
            label: "性能测试设备",
            id: "DEV-TEST-002",
            type: "device"
          }
        ]
      }
    ]
  }
];

关键说明 #

• 通过slotProps.node可获取节点的所有属性，包括type、children，以此精准判断是否应用列表渲染。
• 若需要更标准的表格样式，可将.device-node-table设为display: table，.device-row设为display: table-row，内部元素设为display: table-cell。
• 若设备节点可能存在子节点，可调整判断条件，仅对无后代的device节点启用列表样式。

内容的提问来源于stack exchange，提问作者Yuray