SpliceTree

主题

核心（@splicetree/core） ​

安装 ​

pnpm add @splicetree/core

使用 ​

ts
import { createSpliceTree } from '@splicetree/core'

const data = [
  { id: 'a' },
  { id: 'b', parent: 'a' },
]

const tree = createSpliceTree(data, {
  configuration: {
    keyField: 'id',
    parentField: 'parent',
    defaultExpanded: ['a'],
  },
})

for (const node of tree.items()) {
  console.log(node.id, node.level)
}

示例 ​

基本用法 ​

loading

展开指定节点 ​

loading

默认展开所有节点 ​

loading

展开指定层级 ​

loading

默认展开所有层级 ​

loading

从上面示例可以看到 默认展开所有层级 支持 2 种方式

  • configuration.defaultExpanded: true
  • configuration.defaultExpandedLevel: 'deepest'

展开/收起所有节点 ​

loading

自定义 Key 字段 ​

loading

自定义 Parent 字段 ​

loading

Api ​

参数 ​

参数类型默认值说明
pluginsSpliceTreePlugin[][]插件列表
configuration.keyFieldstring'id'作为节点唯一键的字段名
configuration.parentFieldstring'parent'作为父引用的字段名
configuration.defaultExpandedtrue | string[][]初始展开：true 展开全部或指定 ID 列表
configuration.defaultExpandedLevelnumber | 'deepest'undefined初始展开层级：数字或 'deepest'

默认展开的优先级与规则

  • 当 configuration.defaultExpanded === true：忽略 configuration.defaultExpandedLevel，直接展开全部
  • 当 configuration.defaultExpanded 为 string[]：
    • 展开这些 ID 对应节点
    • 若同时提供 configuration.defaultExpandedLevel：'deepest' 则展开全部；数字则按层级追加展开
  • 当未提供 configuration.defaultExpanded：使用 configuration.defaultExpandedLevel（'deepest' 展开全部，数字按层级展开）

实例方法 ​

名称参数说明
items()-返回当前可见节点序列
getNode(id)id: string通过 id 获取节点
events-事件总线（on/emit）
expandedKeys()-获取已展开的节点集合（数组）
isExpanded(id)id: string判断节点是否展开
expand(ids)ids: string | string[]展开单个或多个节点
collapse(ids)ids: string | string[]收起单个或多个节点
toggleExpand(ids)ids: string | string[]切换单个或多个节点的展开状态
expandAll()-展开全部节点
collapseAll()-收起全部节点
toggleExpandAll()-切换“全部展开/全部收起”
appendChildren(parentId, children)parentId: string | undefined; children: T[]追加子节点
moveNode(id, newParentId, beforeId?)id: string; newParentId: string | undefined; beforeId?: string移动节点到新父级并可指定插入位置
syncData(next)next: T[]同步数据源并刷新内部缓存与节点扩展

节点属性 ​

名称说明
id节点唯一标识
original原始数据
level层级（从 0 开始）

节点方法 ​

名称参数说明
isExpanded-是否展开
hasChildren-是否有子节点
getParent-获取父节点
getChildren-获取子节点数组
toggleExpand-切换展开状态