从 0 到 1 开发 Splicetree无头树：选择能力：selectable 的行为设计

SpliceTree 是一个无头（Headless）、框架无关的树运行时。专注树的结构、状态与行为，通过插件扩展勾选、拖拽、搜索、懒加载、键盘/点击选择等能力；UI 渲染由你决定，官方提供 Vue 3 适配器。

selectable 是“行为插件”，消费输入事件，实现：

• 单选、复选（Ctrl/Cmd 切换）
• Shift 范围选择
• 配合键盘方向实现导航选中

用法

import keyboard from '@splicetree/plugin-keyboard'
import pointer from '@splicetree/plugin-pointer'
import selectable from '@splicetree/plugin-selectable'

const tree = createSpliceTree(data, {
  plugins: [keyboard, pointer, selectable],
  configuration: {
    keyboard: { target: '.list' },
    selectable: { multiple: true, defaultSelected: ['a'] },
  },
})

UI 渲染

• node.isSelected() 控制样式
• tree.selectedKeys 获取选中集合

• 相关链接：

• 文档与示例：www.splicetree.dev
• 仓库：Splice Tree