# virtual-tree-select

**Repository Path**: doramart/virtual-tree-select

## Basic Information

- **Project Name**: virtual-tree-select
- **Description**: A high-performance virtual scrolling tree select component for Vue 2 & Vue 3
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-31
- **Last Updated**: 2026-02-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Virtual Tree Select

一个高性能的虚拟滚动树选择器组件，支持 Vue 2 和 Vue 3。

## 特性

- ✅ 虚拟滚动 - 支持 10,000+ 节点流畅滚动
- ✅ 单选/多选模式
- ✅ 选中项置顶显示
- ✅ 父节点统计信息 (2/100)
- ✅ 搜索过滤
- ✅ 键盘导航
- ✅ 自定义节点渲染
- ✅ 标签显示（多选模式）
- ✅ 智能定位（自适应屏幕边界）
- ✅ 粘性头部
- ✅ TypeScript 支持
- ✅ 主题定制（Less）
- ✅ 国际化

## 安装

```bash
npm install virtual-tree-select
# or
yarn add virtual-tree-select
# or
pnpm add virtual-tree-select
```

## 使用

### Vue 3

```vue
<template>
  <VirtualTreeSelect
    v-model:value="selectedKeys"
    :dataSource="treeData"
    mode="multiple"
    placeholder="请选择"
  />
</template>

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

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

### Vue 2

```vue
<template>
  <VirtualTreeSelect
    :value="selectedKeys"
    :dataSource="treeData"
    mode="multiple"
    placeholder="请选择"
    @change="handleChange"
  />
</template>

<script>
import { VirtualTreeSelect } from 'virtual-tree-select/vue2';
import 'virtual-tree-select/style.css';

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

## 开发

```bash
# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

# 运行测试
npm run test

# 运行测试（带覆盖率）
npm run test:coverage

# 类型检查
npm run type-check
```

## 文档

详细文档请查看 [.kiro/specs/virtual-tree-select](./.kiro/specs/virtual-tree-select) 目录：
- [需求文档](./. kiro/specs/virtual-tree-select/requirements.md)
- [设计文档](./.kiro/specs/virtual-tree-select/design.md)
- [任务列表](./.kiro/specs/virtual-tree-select/tasks.md)

## License

MIT