懒加载子节点

数据量大时（如几千节点的组织架构），初始只给顶层节点，子级在首次展开时通过 load 函数异步获取。

懒加载子节点

lazy + load（Vue 3 版 1.4.0 新增）：初始只给顶层节点，子级在首次展开时通过 load 异步获取（本用例模拟 800ms 接口延迟）；resolve 后写入源数据并展开，加载过的节点不会重复请求。 reject 或抛错时节点回到折叠态、可重试；加载中按钮带 is-loading 旋转指示， #expand-btn 作用域新增 loading。

xxx科技有有限公司

已发起 0 次加载请求（每个节点至多一次）。

<template>
  <vue-okr-tree
    :data="lazyData"
    node-key="id"
    direction="horizontal"
    show-collapsable
    lazy
    :load="loadNode"
  />
</template>

<script setup>
import { ref } from 'vue'
import { VueOkrTree, TreeLoadFunction } from 'vue3-okr-tree'

const lazyData = ref([{ id: 1, label: 'xxx科技有有限公司' }])

// 模拟 800ms 异步接口；reject 或抛错时节点回到折叠态、可重试
const loadNode = (node, resolve, reject) => {
  fetchChildren(node.data.id)
    .then(resolve)
    .catch(() => reject())
}
</script>

显示代码

行为约定

未加载节点：初始 data 中没有 children 字段（或为空数组）的节点视为未加载；load resolve 后子节点会同步写入源数据的 children（与 append 语义一致），并标记为已加载，之后不再重复请求。
展开驱动：点击 +/- 按钮、expandAll / expandNode / scrollToNode、default-expanded-keys、v-model:expanded-keys 触发未加载节点时，都会先调用 load，完成后再展开。
失败与重试：reject() 或 load 抛错时节点回到折叠态（按钮上的 is-loading 状态清除），下次展开会重新请求。
叶子节点：用 props: { isLeaf: 'leaf' } 指定叶子字段（支持函数），标记为叶子的未加载节点不显示展开按钮、不触发请求；未指定时未加载节点默认视为有子节点。
加载中状态：按钮带 is-loading 类（内置旋转指示），#expand-btn 插槽作用域新增 loading: boolean；show-node-num 在未加载时不显示数字。
过滤：filter 不会触发未加载节点的 load（未加载子树内容未知）。
OKR 左树：load 收到的 node.isLeftChild 为 true 时表示左树节点，可按侧返回不同数据。

懒加载子节点 ​

懒加载子节点

行为约定 ​

懒加载子节点

行为约定