Vritual List 虚拟列表

Test1

Test2

Test3

Test4

Test5

Test6

Test7

Test8

Test9

Test10

Test11

Test12

Test13

Test14

Test15

基本使用

虚拟列表的基本用法

<script setup lang="ts">
const data = Array.from({ length: 1000 }).map((_, index) => {
  return {
    id: index + 1,
    name: `Test${index + 1}`,
  }
})
function handleClickItem(item) {
  console.log(item)
}
</script>

<template>
  <div>
    <t-virtual-list
      :height="400"
      :data="data"
      @clickItem="handleClickItem"
    >
      <template #item="{ item }">
        <div class="item-data">
          {{ item.name }}
        </div>
      </template>
    </t-virtual-list>
  </div>
</template>

<style scoped>
.item-data{
  display: flex;
  align-items: center;
  height: 100%;
}
</style>

<script setup lang="ts">
const data = Array.from({ length: 1000 }).map((_, index) => {
  return {
    id: index + 1,
    name: `Test${index + 1}`,
  }
})
function handleClickItem(item) {
  console.log(item)
}
</script>

<template>
  <div>
    <t-virtual-list
      :height="400"
      :data="data"
      @clickItem="handleClickItem"
    >
      <template #item="{ item }">
        <div class="item-data">
          {{ item.name }}
        </div>
      </template>
    </t-virtual-list>
  </div>
</template>

<style scoped>
.item-data{
  display: flex;
  align-items: center;
  height: 100%;
}
</style>