Vue 3 适配

安装

pnpm add @splicetree/adapter-vue

使用

import { useSpliceTree } from '@splicetree/adapter-vue'

const expanded = ref<string[] | string>(['a'])

const { items, selectedKeys, expand, collapse, toggleExpand } = useSpliceTree(
  data,
  {
    configuration: {
      defaultExpanded: ['a'],
    },
    expandedKeys: expanded,
  },
)

在组件中：

<template>
  <div v-for="n in items" :key="n.id">
    {{ n.original.title }}
  </div>
  <div>选中集合：{{ selectedKeys }}</div>
</template>

返回值

字段	类型	说明
items	ShallowRef<SpliceTreeNode[]>	响应式可见节点列表
selectedKeys	ShallowRef<string[]>	响应式选中集合（配合 selectable 插件）
selectedKeysSet	Set<string> | undefined	原始 Set 引用（用于兼容旧写法）
其他	与核心一致	适配层复用核心 API（除 items() 改为 items）

实例方法

名称	参数	说明
getNode	id: string	获取节点
expand	id: string | string[]	展开节点或节点列表
collapse	id: string | string[]	收起节点或节点列表
toggleExpand	id: string | string[]	切换展开状态
expandAll	无	展开所有节点
collapseAll	无	收起所有节点
toggleExpandAll	无	切换所有节点展开状态
appendChildren	parentId: string | undefined, children: any[]	追加子节点
moveNode	id: string, newParentId?: string, beforeId?	移动节点到新父级并指定插入位置
events.on	(name, handler) => () => boolean	订阅事件
events.emit	payload	派发事件

选项（适配器额外）

名称	类型	说明
expandedKeys	Ref<string | string[]> | ComputedRef<...> | WritableComputedRef<...>	响应式展开控制：展开给定 id（或 id 列表）及其父链，值变更时自动应用

关于 expandedKeys

• 初始化后会立即根据 expandedKeys 展开一次
• 后续当 expandedKeys 值变化时会再次展开
• 每次 syncData 后也会重新应用，以保证目标路径可见
• 若只想展开目标节点而不展开父链，可在 issue 中反馈需求

数据更新策略

• 适配器监听到 data 引用变化时，会先判断是否存在“结构性变更”（新增/删除节点或父级变化）
  • 结构性变更：调用 tree.syncData(nextArray) 重建
  • 非结构性变更：逐项调用 updateOriginal(id, patch) 合并字段变更，避免重建导致的状态丢失
• 与懒加载配合：即使发生重建，懒加载插件会恢复此前已加载的子树与方法覆盖