waningflow / vue3-virtual-list

Scroll list for big amount data. Based on vue3.

vue3-virtual-list

Scroll list for big acount of data. Based on Vue3.

live demo

Install

yarn add vue3-virtual-list

Example

<template>
  <div class="list-container">
    <VirtualList :data="dataSource">
      <template v-slot="{ item, index }">
        <div class="item-container">
          <div class="cell cell-index">{{ index + 1 }}</div>
          <div class="cell">{{ item.name }}</div>
          <div class="cell">{{ item.email }}</div>
          <div class="cell">{{ item.address }}</div>
        </div>
      </template>
    </VirtualList>
  </div>
</template>

<script>
  import { VirtualList } from 'vue3-virtual-list';
  import { mock } from './utils';

  export default {
    data() {
      return {
        dataSource: mock(100000),
      };
    },
    components: {
      VirtualList,
    },
  };
</script>

<style>
  .list-container {
    width: 800px;
    height: 600px;
    border: 2px solid #4caf50;
    margin: 0 auto;
  }
  .item-container {
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid #ccc;
  }
</style>

Props

name	type	description	required	default
data	Array	The array of data. Every item is a row.	Yes
dataKey	String	Field as key.	No	id
itemSize	Number	The height in pixels of each row.	No	40
poolBuffer	Number	How many rows will be rendered except for the visible ones.	No	50