https://github.com/keno-lee/vue-virt-list

【持续更新中】⚡️ 一个支持vue2&vue3的高性能虚拟(滚动)列表组件 👉🏻 轻量5KB 百万数据渲染 满帧率滚动 丰富场景支持 📑 [vue虚拟列表] [vue虚拟滚动列表][vue虚拟树] [vue-virtual-list] [vue-virtual-scroll-list] [vue-virtual-scroller] [vue-virt-tree]
https://github.com/keno-lee/vue-virt-list

virt-list virtual-list virtual-scroll-list virtual-scroller virtualized-list vue-virt-tree vue-virtual-list vue-virtual-tree vue2 vue3

Last synced: 10 months ago
JSON representation

【持续更新中】⚡️ 一个支持vue2&vue3的高性能虚拟(滚动)列表组件 👉🏻 轻量5KB 百万数据渲染 满帧率滚动 丰富场景支持 📑 [vue虚拟列表] [vue虚拟滚动列表][vue虚拟树] [vue-virtual-list] [vue-virtual-scroll-list] [vue-virtual-scroller] [vue-virt-tree]

• Host: GitHub
• URL: https://github.com/keno-lee/vue-virt-list
• Owner: keno-lee
• License: mit
• Fork: true (kolarorz/vue-virt-list)
• Created: 2025-03-03T11:49:17.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2025-03-03T11:53:38.000Z (over 1 year ago)
• Last Synced: 2025-03-03T12:36:03.215Z (over 1 year ago)
• Language: TypeScript
• Homepage: https://kolarorz.github.io/vue-virt-list/
• Size: 154 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0

Awesome Lists containing this project

README

          
# vue-virt-list 虚拟列表 虚拟滚动列表 虚拟树









  

  

  



## Documentation

To check out docs, visit vue-virt-list

👉 Advantages

## Quick Start

```shell

npm install vue-virt-list -S

```

### Options API

```html

  


    

      

        
{{ index }} - {{ itemData.id }} - {{ itemData.text }}

      

    

  


  import { VirtList } from 'vue-virt-list';

  export default {

    components: { VirtList },

    data() {

      return {

        list: [{ id: 0, text: 'text' }],

      };

    },

  };

```

### Composition API

```html

  


    

      

        
{{ index }} - {{ itemData.id }} - {{ itemData.text }}

      

    

  


  import { ref, shallowRef } from 'vue';

  import { VirtList } from 'vue-virt-list';

  const list = ref([{ id: 0, text: 'text' }]);

  // 大数据建议使用 shallowRef: https://keno-lee.github.io/vue-virt-list/guide/instructions#shallowref

  // const list = shallowRef([{ id: 0, text: 'text' }])

```

## Sponsor

开源不易，如果帮助到你，请作者喝杯咖啡吧~





## WeChat

有问题可扫码加好友进入技术交流群（备注github账号名）