静态数据

静态模式适合一次能拿到完整组织数据的场景。SDK 会在首次加载时根据所有 parentId 精确推导父子关系和叶子节点。

完整配置

import { OrgTreeCore } from '@org-tree/core'

const data = [
  { id: 'root', parentId: null, name: '集团总部' },
  { id: 'tech', parentId: 'root', name: '技术中心' },
  { id: 'product', parentId: 'root', name: '产品中心' },
  { id: 'frontend', parentId: 'tech', name: '前端团队' },
  { id: 'backend', parentId: 'tech', name: '后端团队' },
  { id: 'growth', parentId: 'product', name: '增长产品' },
]

const sdk = new OrgTreeCore({
  el: '#tree',
  direction: 'down',
  layout: {
    spaceX: 40,
    spaceY: 60,
    nodeSize: { width: 220, height: 88 },
  },
  data,
})

await sdk.loadData()

Vue 渲染

<OrgTreeProvider :sdk="sdk">
  <OrgTree v-slot="{ node }">
    <article
      class="department-card"
      :style="{
        width: `${node.width}px`,
        height: `${node.height}px`,
      }"
    >
      <strong>{{ node.info.name }}</strong>
      <small>ID: {{ node.nodeId }}</small>
    </article>
  </OrgTree>
</OrgTreeProvider>

初始展开状态

由于所有后代都已在 data 中，首次布局会展示完整树。包含子节点的节点状态为 expanded: true。

如果希望首屏只展示前两层，可以在调用 loadData() 后主动收起指定层级的节点：

await sdk.loadData()

for (const nodeId of ['tech', 'product'])
  sdk.collapse({ nodeId })

每次 collapse() 都会触发一次重排。如果节点很多且首屏裁剪是固定需求，更适合让接口只返回首屏数据并使用动态模式。

自定义字段

接口使用 nodeId 与 pid 时，无需转换整份数据：

const sdk = new OrgTreeCore({
  el: '#tree',
  layout: {
    spaceX: 40,
    spaceY: 60,
    fieldMap: { id: 'nodeId', parentId: 'pid' },
  },
  data: [
    { nodeId: 'root', pid: null, label: '集团总部' },
    { nodeId: 'tech', pid: 'root', label: '技术中心' },
  ],
})

更多规则参见数据模型。