跳转到内容

Build Better Trees, Faster.

SpliceTree 是一个无头、框架无关的树组件核心。
为高性能而生,提供虚拟滚动、拖拽排序、多选等开箱即用的能力,同时保持极致的灵活性。

$npm install @splicetree/core
框架无关
TypeScript 完备
无头组件
零依赖
Chrome Toolbar Light
交互式树 · 拖拽排序 · 勾选多选 · 键盘导航
Tropical Fruits
Berries
Strawberry
Cream Strawberry
Supreme Cream Strawberry
Blueberry
Raspberry
Blackberry
Citrus Fruits
Stone Fruits
Melons
上一个 下一个 收起/父级 展开/子级
拖拽排序:顶部线=前插;底部线=后插;中间高亮=成为子节点
选择:点击选中;⌘/Ctrl+点击 多选;Shift+点击 范围选择
勾选:点击方块勾选;父子状态自动关联

👆 这是一个完全交互式的示例:尝试拖拽、多选、键盘操作

名称
功能
Version
Downloads
@splicetree/core
核心运行时
@splicetree/adapter-vue
Vue 3 适配层
@splicetree/plugin-checkable
勾选与半选
@splicetree/plugin-dnd
拖拽移动节点
@splicetree/plugin-keyboard
键盘导航
@splicetree/plugin-lazy-load
懒加载子节点
@splicetree/plugin-search
搜索匹配
@splicetree/plugin-pointer
指针输入
@splicetree/plugin-selectable
选择与激活

插件体系

可自由组合的能力:DnD、Checkable、Keyboard、LazyLoad、Search 等,按需引入,体积轻量。

框架无关

核心由纯 TypeScript 构建,无任何框架依赖。可在浏览器、Node、Web Worker 中稳定运行。

为性能而生

分片计算与增量更新,面向大规模数据的可见性与增删改查,轻松处理万级节点。

结构灵活

面向扁平数据设计,支持任意字段映射、动态插入、懒加载与状态持久化。

Vue 3 适配器

提供官方 Vue 3 适配器,轻量绑定层,可直接连接现有组件或自定义渲染逻辑。

开发者友好

简洁的 API 设计、完整的 TypeScript 类型推断、插件化扩展,让复杂交互开发更轻松。