@virtual-tree-select/vue2

A high-performance virtual scrolling tree select component for Vue 2.6 with Composition API 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 (uses fixed positioning)
• 💪 TypeScript - Full type definitions
• 🎭 Theme Customization - Less variables support

📦 Installation

npm install @virtual-tree-select/vue2 @vue/composition-api

Or using yarn:

yarn add @virtual-tree-select/vue2 @vue/composition-api

Or using pnpm:

pnpm add @virtual-tree-select/vue2 @vue/composition-api

⚠️ Important Notes

Vue Version Requirements

• Vue 2.6.x is required (NOT 2.7.x)
• If you're using Vue 2.7, please use @virtual-tree-select/vue3 instead
• Lock your Vue version in package.json: "vue": "~2.6.14"

Required Dependencies

This package requires @vue/composition-api to work:

{
  "dependencies": {
    "vue": "~2.6.14",
    "@vue/composition-api": "^1.7.0",
    "@virtual-tree-select/vue2": "^0.1.0"
  }
}

Plugin Registration

You must register the Composition API plugin before using the component:

import Vue from 'vue';
import VueCompositionAPI from '@vue/composition-api';

Vue.use(VueCompositionAPI);

🚀 Quick Start

Options API

<template>
  <VirtualTreeSelect
    :value="selectedKeys"
    :dataSource="treeData"
    mode="multiple"
    placeholder="Please select"
    @input="handleChange"
  />
</template>

<script>
import Vue from 'vue';
import VueCompositionAPI from '@vue/composition-api';
import { VirtualTreeSelect } from '@virtual-tree-select/vue2';
import '@virtual-tree-select/vue2/style.css';

Vue.use(VueCompositionAPI);

export default {
  components: {
    VirtualTreeSelect,
  },
  data() {
    return {
      selectedKeys: [],
      treeData: [
        {
          key: '1',
          title: 'Node 1',
          children: [
            { key: '1-1', title: 'Child Node 1-1' },
            { key: '1-2', title: 'Child Node 1-2' },
          ],
        },
      ],
    };
  },
  methods: {
    handleChange(value) {
      this.selectedKeys = value;
    },
  },
};
</script>

Composition API

<template>
  <VirtualTreeSelect
    :value="selectedKeys"
    :dataSource="treeData"
    mode="multiple"
    placeholder="Please select"
    @input="selectedKeys = $event"
  />
</template>

<script>
import Vue from 'vue';
import VueCompositionAPI, { ref } from '@vue/composition-api';
import { VirtualTreeSelect } from '@virtual-tree-select/vue2';
import '@virtual-tree-select/vue2/style.css';

Vue.use(VueCompositionAPI);

export default {
  components: {
    VirtualTreeSelect,
  },
  setup() {
    const selectedKeys = ref([]);
    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' },
        ],
      },
    ]);

    return {
      selectedKeys,
      treeData,
    };
  },
};
</script>

📖 Documentation

• API Documentation - Complete API reference
• Migration Guide - Vue 2.6 specific guide
• Main Repository - Source code and examples
• Demo - Live examples

🔧 Requirements

• Vue 2.6.x (NOT 2.7.x)
• @vue/composition-api 1.7.0 or higher
• TypeScript 5.0+ (optional, but recommended)

🔄 Vue 2 vs Vue 3 Differences

| Feature | Vue 3 | Vue 2.6 | |---------|-------|---------| | v-model | v-model:value | :value + @input | | Events | update:value | input | | Positioning | Teleport | Fixed positioning | | Dependencies | None | @vue/composition-api |

Event Handling

// Vue 3
<VirtualTreeSelect v-model:value="value" />

// Vue 2.6
<VirtualTreeSelect :value="value" @input="value = $event" />

💡 Usage Examples

Single Selection Mode

<template>
  <VirtualTreeSelect
    :value="selectedKey"
    :dataSource="treeData"
    mode="single"
    placeholder="Select one item"
    @input="selectedKey = $event"
  />
</template>

With Search

<template>
  <VirtualTreeSelect
    :value="selectedKeys"
    :searchValue="searchText"
    :dataSource="treeData"
    mode="multiple"
    showSearch
    @input="selectedKeys = $event"
    @update:searchValue="searchText = $event"
  />
</template>

Custom Node Rendering

<template>
  <VirtualTreeSelect
    :value="selectedKeys"
    :dataSource="treeData"
    mode="multiple"
    @input="selectedKeys = $event"
  >
    <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/vue3 - Vue 3 version
• @virtual-tree-select/shared - Shared utilities