virtual-tree-list-plus

高性能原生 TypeScript 虚拟滚动树形组件，无框架依赖，支持海量树数据渲染，开箱即用。

✨ 特性

• 🚀 虚拟列表：仅渲染可视区域节点，万级/十万级树数据流畅滚动不卡顿
• 🌳 无限层级树形：支持节点展开/收起、层级缩进
• 📘 完整 TypeScript 类型，IDE 友好提示
• 🧩 原生实现：不依赖 Vue / React，任意前端项目通用
• 📦 多格式输出：ESM / CJS / UMD，支持浏览器、Node、构建工具
• 🪶 零依赖：体积轻量，无第三方库
• 🎨 基础样式简洁，可自定义覆盖

适用场景

• 后台管理系统组织架构树
• 权限菜单树、部门树
• 海量数据树形选择器
• 树形表格、文件目录树
• 万级节点高性能渲染场景

📦 安装

npm install virtual-tree-list-plus
# or
yarn add virtual-tree-list-plus
# or
pnpm add virtual-tree-list-plus
🚀 快速上手
```html
import { VirtualTreeListPlus } from 'virtual-tree-list-plus'
import type { TreeNode } from 'virtual-tree-list-plus'

// 树形数据源
const treeData: TreeNode[] = [
  {
    id: 1,
    label: '一级节点 1',
    children: [
      { id: 11, label: '二级节点 1-1' },
      {
        id: 12,
        label: '二级节点 1-2',
        children: [{ id: 121, label: '三级节点 1-2-1' }]
      }
    ]
  },
  { id: 2, label: '一级节点 2' }
]

// 挂载容器
const container = document.getElementById('tree-container')!

// 初始化虚拟树
new VirtualTreeListPlus({
  container,
  data: treeData,
  itemHeight: 40,
  defaultExpandAll: false
})

原生 HTML / UMD 直接引入

<div id="tree-container" style="width:400px;height:500px;border:1px solid #ccc;"></div>

<script src="https://unpkg.com/virtual-tree-list-plus/dist/virtual-tree-list-plus.umd.js"></script>
<script>
  const { VirtualTreeListPlus } = window.VirtualTreeListPlus

  const data = [
    { id: 1, label: '根节点', children: [{ id: 11, label: '子节点' }] }
  ]

  new VirtualTreeListPlus({
    container: document.getElementById('tree-container'),
    data,
    itemHeight: 40
  })
</script>

📖 类型定义

interface TreeNode {
  id: string | number
  label: string
  children?: TreeNode[]
  [key: string]: any // 支持自定义扩展字段
}

VirtualTreeOptions 配置项

interface VirtualTreeOptions {
  /** 挂载容器 DOM 元素 */
  container: HTMLElement
  /** 树形数据源 */
  data: TreeNode[]
  /** 每个节点固定高度(px)，必填 */
  itemHeight: number
  /** 默认是否展开所有节点，默认 false */
  defaultExpandAll?: boolean
}

🔧 实例方法

const tree = new VirtualTreeListPlus({ ... })

// 更新树数据，重新渲染
tree.updateData(newData: TreeNode[])

// 销毁实例，清空容器、移除滚动监听
tree.destroy()