@zjinh/vue-virtual-tree

English | 简体中文

@zjinh/vue-virtual-tree

一个同时支持 Vue 2.7 与 Vue 3 的固定行高虚拟树组件。它通过只挂载视口内的行来处理大规模树数据，并提供复选、当前节点、过滤、懒加载、数据修改方法和自定义行内容等常用能力。

包格式为 ESM。Vue 2.7 与 Vue 3 都使用 @zjinh/vue-virtual-tree 根入口。公共样式从 @zjinh/vue-virtual-tree/style.css 导入。

兼容性

不支持 Vue 2.6。组件仅提供 @zjinh/vue-virtual-tree 一个入口，已移除 /vue2 和 /vue3 包子路径。无需安装 vue-demi 或运行版本切换脚本。

在线演示

• Workbench
• Vue 2.7 演示
• Vue 3 演示

安装

选择一种包管理器：

pnpm add @zjinh/vue-virtual-tree

npm install @zjinh/vue-virtual-tree

yarn add @zjinh/vue-virtual-tree

在应用中安装 Vue 2.7.x 或 Vue 3 >= 3.2，两个版本均使用根入口。

Vue 3 快速开始

在 main.ts 中注册组件：

import { createApp } from 'vue'
import VueVirtualTree from '@zjinh/vue-virtual-tree'
import '@zjinh/vue-virtual-tree/style.css'
import App from './App.vue'

createApp(App).use(VueVirtualTree).mount('#app')

然后渲染一棵树：

<script setup lang="ts">
interface DemoNode {
  id: number
  label: string
  children?: DemoNode[]
}

const data: DemoNode[] = [{
  id: 1,
  label: 'Root',
  children: [
    { id: 2, label: 'First child' },
    { id: 3, label: 'Second child' },
  ],
}]
</script>

<template>
  <VueVirtualTree
    :data="data"
    :height="320"
    node-key="id"
    :default-expanded-keys="[1]"
  ></VueVirtualTree>
</template>

如果要局部注册，导入同一组件并添加 components: { VueVirtualTree }。

Vue 2.7 快速开始

在 main.ts 中使用同一个根入口：

import Vue from 'vue'
import VueVirtualTree from '@zjinh/vue-virtual-tree'
import '@zjinh/vue-virtual-tree/style.css'
import App from './App.vue'

Vue.use(VueVirtualTree)
new Vue({ render: (h) => h(App) }).$mount('#app')

组件可以配合 Vue 2.7 Options API 使用：

<script lang="ts">
interface DemoNode {
  id: number
  label: string
  children?: DemoNode[]
}

export default {
  data(): { data: DemoNode[] } {
    return {
      data: [{
        id: 1,
        label: 'Root',
        children: [{ id: 2, label: 'Child' }],
      }],
    }
  },
}
</script>

<template>
  <VueVirtualTree
    :data="data"
    :height="320"
    node-key="id"
  ></VueVirtualTree>
</template>

如果要局部注册，请导入同一个组件并添加 components: { VueVirtualTree }。

详细文档

• 使用指南：尺寸设置、大数据、复选与当前节点、过滤、懒加载、slot 和 ref 方法。
• API 参考：props、方法、事件、slot 参数、导出类型和运行限制。

开发

pnpm install --frozen-lockfile
pnpm run dev:vue2
pnpm run dev:vue3
pnpm test
pnpm run build

许可证

MIT