@virtual-tree-select/vue3

A high-performance virtual scrolling tree select component for Vue 3 with TypeScript support

✨ Features

• 🚀 Virtual Scrolling - Smoothly handle 10,000+ nodes
• 🎯 Single/Multiple Selection - Flexible selection modes
• 📊 Group Layout - 3 layout modes (equal height, weighted, adaptive)
• 🔍 Search & Filter - Quick node search
• ⌨️ Keyboard Navigation - Full keyboard support
• ⭐ Priority Display - Selected items shown first
• 📈 Parent Statistics - Show selection count (e.g., 2/100)
• 🎨 Custom Rendering - Slot-based customization
• 🏷️ Tag Management - Tag display in multiple mode
• 📍 Smart Positioning - Auto-adjust to screen boundaries
• 💪 TypeScript - Full type definitions
• 🎭 Theme Customization - Less variables support

📦 Installation

npm install @virtual-tree-select/vue3

Or using yarn:

yarn add @virtual-tree-select/vue3

Or using pnpm:

pnpm add @virtual-tree-select/vue3

🚀 Quick Start

<template>
  <VirtualTreeSelect
    v-model:value="selectedKeys"
    :dataSource="treeData"
    mode="multiple"
    placeholder="Please select"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { VirtualTreeSelect } from '@virtual-tree-select/vue3';
import '@virtual-tree-select/vue3/style.css';

const selectedKeys = ref<string[]>([]);
const treeData = ref([
  {
    key: '1',
    title: 'Node 1',
    children: [
      { key: '1-1', title: 'Child Node 1-1' },
      { key: '1-2', title: 'Child Node 1-2' },
    ],
  },
  {
    key: '2',
    title: 'Node 2',
    children: [
      { key: '2-1', title: 'Child Node 2-1' },
    ],
  },
]);
</script>

📖 Documentation

• API Documentation - Complete API reference
• Main Repository - Source code and examples
• Demo - Live examples

🔧 Requirements

• Vue 3.3.0 or higher
• TypeScript 5.0+ (optional, but recommended)

💡 Usage Examples

Single Selection Mode

<template>
  <VirtualTreeSelect
    v-model:value="selectedKey"
    :dataSource="treeData"
    mode="single"
    placeholder="Select one item"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { VirtualTreeSelect } from '@virtual-tree-select/vue3';

const selectedKey = ref<string>('');
const treeData = ref([/* your tree data */]);
</script>

With Search

<template>
  <VirtualTreeSelect
    v-model:value="selectedKeys"
    v-model:searchValue="searchText"
    :dataSource="treeData"
    mode="multiple"
    showSearch
    placeholder="Search and select"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { VirtualTreeSelect } from '@virtual-tree-select/vue3';

const selectedKeys = ref<string[]>([]);
const searchText = ref('');
const treeData = ref([/* your tree data */]);
</script>

Custom Node Rendering

<template>
  <VirtualTreeSelect
    v-model:value="selectedKeys"
    :dataSource="treeData"
    mode="multiple"
  >
    <template #title="{ node }">
      <span :style="{ color: node.color }">
        {{ node.title }}
      </span>
    </template>
  </VirtualTreeSelect>
</template>

🤝 Contributing

Contributions are welcome! Please read our Contributing Guide for details.

📄 License

MIT © Virtual Tree Select Contributors

🔗 Related Packages

• @virtual-tree-select/vue2 - Vue 2.6 version
• @virtual-tree-select/shared - Shared utilities