Vue3应对后端接口返回十万条数据的解决方案

<el-table :data="tableData">
  <el-table-column prop="id" label="ID" />
  <el-table-column prop="name" label="名称" />
</el-table>

<el-pagination
  v-model:current-page="page"
  :page-size="pageSize"
  :total="total"
  @current-change="fetchData"
/>

<template>
  <div class="list" @scroll="onScroll" ref="container">
    <div class="spacer" :style="{ height: totalHeight + 'px' }"></div>
    <div
      v-for="item in visibleData"
      :key="item.id"
      class="item"
      :style="{ transform: `translateY(${item.offset}px)` }"
    >
      {{ item.text }}
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const data = ref(Array.from({ length: 100000 }, (_, i) => ({
  id: i,
  text: `Row ${i}`,
  offset: 0
})))

const rowHeight = 30
const containerHeight = 600
const visibleCount = Math.ceil(containerHeight / rowHeight) + 2
const start = ref(0)

const totalHeight = data.value.length * rowHeight

const visibleData = computed(() => {
  return data.value.slice(start.value, start.value + visibleCount).map((item, i) => ({
    ...item,
    offset: (start.value + i) * rowHeight
  }))
})

const onScroll = (e) => {
  start.value = Math.floor(e.target.scrollTop / rowHeight)
}
</script>

<style>
.list { height: 600px; overflow-y: auto; position: relative; }
.spacer { width: 100%; }
.item { position: absolute; width: 100%; height: 30px; border-bottom: 1px solid #ddd; }
</style>