// Vue3安装（适配Vue3.0+，推荐版本2.0.0+，避免版本兼容问题）
npm install vue-virtual-scroller@next --save
// 若安装失败，可使用cnpm或yarn替代
cnpm install vue-virtual-scroller@next --save
yarn add vue-virtual-scroller@next
// Vue2安装（适配Vue2.6+，推荐版本1.0.10+）
npm install vue-virtual-scroller@1.0.10 --save
// 安装后若出现依赖报错，需安装@vue/composition-api（Vue2适配composition-api）
npm install @vue/composition-api --save

// Vue3（完整注册，包含全局配置，适配多场景）
import { createApp } from 'vue';
import App from './App.vue';
import VueVirtualScroller from 'vue-virtual-scroller';
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'; // 必须引入样式，否则渲染错乱

const app = createApp(App);
// 全局配置虚拟列表，优化性能（可选，根据项目需求调整）
app.use(VueVirtualScroller, {
  itemSize: 50, // 全局默认单个列表项高度，避免每个页面重复设置
  buffer: 200, // 可视区域上下缓冲高度，减少滚动时的空白闪烁
  windowResizeDebounce: 100 // 窗口 resize 防抖时间，优化窗口缩放时的渲染性能
});
app.mount('#app');

// Vue2（适配Vue2，需先引入composition-api）
import Vue from 'vue';
import VueCompositionAPI from '@vue/composition-api';
import VueVirtualScroller from 'vue-virtual-scroller';
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';

Vue.use(VueCompositionAPI);
Vue.use(VueVirtualScroller, {
  itemSize: 50,
  buffer: 200
});
new Vue({
  el: '#app',
  render: h => h(App)
});

    
    

          {{ item.id }}
          {{ item.name }}
          {{ item.content }}
        
      
暂无数据
      
数据加载中...
      


import { ref, onMounted, onUnmounted } from 'vue';
// 引入接口请求函数（模拟实际项目接口请求）
import { getBigList } from '@/api/data';
// 十万条数据数组（响应式）
const bigList = ref([]);
// 加载状态（用于接口请求时的loading提示）
const isLoading = ref(false);
// 滚动偏移量（可选，用于埋点或滚动位置记录）
const scrollTop = ref(0);
// 生成测试数据（模拟接口返回，实际项目替换为接口请求）
const generateData = () => {
  const data = [];
  for (let i = 1; i  {
  console.log('当前点击项：', item);
  // 实际项目中可跳转详情页、弹窗等操作
};
// 滚动事件（可选，用于埋点、滚动位置保存）
const handleScroll = (e) => {
  scrollTop.value = e.target.scrollTop;
  // 埋点示例：记录用户滚动深度
  // trackEvent('virtual_list', 'scroll', 'scroll_depth', scrollTop.value);
};
// 页面挂载后初始化数据（落地细节：接口请求+异常捕获+内存优化）
onMounted(async () => {
  try {
    isLoading.value = true;
    // 实际项目中替换为接口请求，避免前端一次性生成大量数据（节省前端内存）
    // const res = await getBigList(); // 接口请求十万条数据（建议后端分批返回，前端拼接）
    // bigList.value = Object.freeze(res.data); // 静态数据冻结，减少响应式开销
    bigList.value = Object.freeze(generateData()); // 模拟接口返回，冻结数据
  } catch (error) {
    console.error('数据加载失败：', error);
    // 异常处理：加载失败提示，可提供重试按钮
    ElMessage.error('数据加载失败，请重试');
  } finally {
    isLoading.value = false;
  }
});
// 组件卸载时清理数据（落地细节：内存释放，避免内存泄漏）
onUnmounted(() => {
  bigList.value = [];
  scrollTop.value = 0;
});

.scroller {
  height: 100%;
}
.list-item {
  height: 50px; // 与item-size严格一致，避免渲染错乱
  line-height: 50px;
  border-bottom: 1px solid #eee;
  padding: 0 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.list-item:hover {
  background-color: #f5f5f5; // 优化交互体验， hover效果
}
.item-id {
  width: 80px;
  color: #666;
}
.item-name {
  width: 150px;
  font-weight: 500;
}
.item-content {
  flex: 1;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; // 避免内容换行，导致列表项高度变化
}
.empty-tip, .loading-tip {
  text-align: center;
  padding: 20px;
  color: #666;
}

    
    

      

        {{ item.id }}
        {{ item.name }}
        {{ item.content }}
      
    
    
    

      

      加载中...（{{ renderList.length }}/100000）
    
    
    

      加载失败，点击重试
    
    
    

      已全部加载完成
    
  

import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import { ElMessage } from 'element-plus';
// 引入接口请求函数（模拟实际项目接口请求）
import { getBatchData } from '@/api/data';
// 十万条原始数据（非响应式，节省内存，仅用于存储）
let bigList = [];
// 用于渲染的数组（响应式，分批添加数据）
const renderList = ref([]);
// 加载状态
const isLoading = ref(true);
// 加载失败状态
const isLoadFail = ref(false);
// 分批配置（落地细节：根据项目性能调整，适配不同设备）
const batchSize = ref(100); // 每批渲染数量，可根据设备性能动态调整
const delay = ref(20); // 每批渲染间隔（ms），性能差的设备可增大至30-50ms
// 定时器标识（用于组件卸载时清除定时器，避免内存泄漏）
let renderTimer = null;
// 生成十万条测试数据（模拟接口返回，实际项目替换为分批接口请求）
const generateData = () => {
  const data = [];
  for (let i = 1; i  {
  try {
    // 计算当前批次的结束索引
    const end = Math.min(start + batchSize.value, data.length);
    // 批量添加数据（使用nextTick，确保DOM更新完成后再进行下一批渲染）
    await nextTick(() => {
      renderList.value.push(...data.slice(start, end));
    });
    // 判断是否渲染完成
    if (end  {
        batchRender(data, end);
      }, delay.value);
    } else {
      isLoading.value = false; // 渲染完成，隐藏加载状态
    }
  } catch (error) {
    console.error('分批渲染失败：', error);
    isLoading.value = false;
    isLoadFail.value = true;
    ElMessage.error('数据渲染失败，请重试');
  }
};
// 重试渲染函数（落地必备，处理渲染失败场景）
const retryRender = () => {
  isLoadFail.value = false;
  isLoading.value = true;
  renderList.value = []; // 清空已渲染数据，重新开始渲染
  batchRender(bigList);
};
// 动态调整批次配置（落地细节：适配不同设备性能）
const adjustBatchConfig = () => {
  // 判断设备性能（简单判断，可根据实际需求优化）
  const isLowPerformance = navigator.hardwareConcurrency  {
  try {
    adjustBatchConfig(); // 初始化时调整批次配置，适配设备性能
    isLoading.value = true;
    // 实际项目中，替换为分批接口请求（每次请求100条，减少接口压力）
    // bigList = [];
    // for (let i = 1; i  {
  if (renderTimer) clearTimeout(renderTimer);
  bigList = [];
  renderList.value = [];
});

.list-wrapper {
  margin-bottom: 20px;
}
.list-item {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #eee;
  padding: 0 20px;
  display: flex;
  align-items: center;
}
.item-id {
  width: 80px;
  color: #666;
}
.item-name {
  width: 150px;
  font-weight: 500;
}
.item-content {
  flex: 1;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.loading {
  text-align: center;
  padding: 20px;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #ddd;
  border-top-color: #409eff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.load-fail {
  text-align: center;
  padding: 20px;
  color: #f56c6c;
  cursor: pointer;
}
.load-fail:hover {
  text-decoration: underline;
}
.render-complete {
  text-align: center;
  padding: 20px;
  color: #67c23a;
}

    
    查看编辑

      

      数据加载中...
    
    
    

      暂无数据
    
    
    

      加载失败，点击重试
    
    
    

      已加载全部数据
    
  

import { ref, onMounted, onUnmounted } from 'vue';
import { ElTable, ElTableColumn, ElButton, ElMessage, ElLoading } from 'element-plus';
// 引入接口请求函数（模拟实际项目接口请求）
import { getTableData } from '@/api/data';
// 十万条表格数据（响应式，用于表格渲染）
const bigList = ref([]);
// 加载状态
const isLoading = ref(true);
// 加载失败状态
const isLoadFail = ref(false);
// 加载完成状态（下拉加载时使用）
const isLoadComplete = ref(false);
// 当前页码（用于分批接口请求）
const currentPage = ref(1);
// 每页条数（用于分批接口请求）
const pageSize = ref(1000);
// 选中的行数据（用于多选操作）
const selectedRows = ref([]);
// 生成十万条测试数据（模拟接口返回，实际项目替换为分批接口请求）
const generateData = (page = 1, pageSize = 1000) => {
  const data = [];
  const start = (page - 1) * pageSize + 1;
  const end = Math.min(page * pageSize, 100000);
  for (let i = start; i  {
  try {
    isLoading.value = true;
    isLoadFail.value = false;
    // 实际项目中，替换为分批接口请求（每次请求1000条，减少接口压力）
    // const res = await getTableData({ page: currentPage.value, pageSize: pageSize.value });
    // const newData = res.data;
    const newData = generateData(currentPage.value, pageSize.value); // 模拟接口返回
    // 拼接数据（下拉加载时追加，首次加载时覆盖）
    if (currentPage.value === 1) {
      bigList.value = Object.freeze(newData); // 静态数据冻结，减少响应式开销
    } else {
      bigList.value = [...bigList.value, ...Object.freeze(newData)];
    }
    // 判断是否加载完成（当前页数据小于每页条数，说明已加载全部）
    if (newData.length  {
  if (isLoadComplete || isLoading) return; // 已加载完成或正在加载，不触发
  await loadTableData();
};
// 重试加载（落地必备，处理加载失败场景）
const retryLoad = () => {
  currentPage.value = 1;
  isLoadComplete.value = false;
  loadTableData();
};
// 表格多选事件（落地必备，处理多选操作）
const handleSelectionChange = (val) => {
  selectedRows.value = val;
  console.log('选中的行：', selectedRows.value);
};
// 查看操作（落地必备，处理表格行查看）
const handleView = (row) => {
  console.log('查看行数据：', row);
  // 实际项目中可跳转详情页、弹窗显示详情等
};
// 编辑操作（落地必备，处理表格行编辑）
const handleEdit = (row) => {
  console.log('编辑行数据：', row);
  // 实际项目中可弹窗编辑、跳转编辑页等
};
// 页面挂载后初始化表格数据（落地细节：初始化配置+数据加载）
onMounted(() => {
  // 初始化表格虚拟滚动配置（可选，根据项目需求调整）
  // ElTable的虚拟滚动默认启用，若需自定义配置，可通过table-layout、scroll-x等属性调整
  loadTableData();
});
// 组件卸载时清理数据（落地细节：释放内存，避免内存泄漏）
onUnmounted(() => {
  bigList.value = [];
  selectedRows.value = [];
  currentPage.value = 1;
  isLoadComplete.value = false;
});

.virtual-table-container {
  width: 100%;
  box-sizing: border-box;
}
.table-loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.8);
  padding: 20px 40px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 1000;
}
.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #ddd;
  border-top-color: #409eff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.table-empty, .table-load-fail, .table-load-complete {
  text-align: center;
  padding: 40px;
  color: #666;
}
.table-load-fail {
  color: #f56c6c;
  cursor: pointer;
}
.table-load-fail:hover {
  text-decoration: underline;
}
.table-load-complete {
  color: #67c23a;
}
.el-table__body-wrapper {
  overflow-y: auto !important; // 确保表格滚动正常
}