// 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
// 安裝后若出現(xiàn)依賴報(bào)錯(cuò)，需安裝@vue/composition-api（Vue2適配composition-api）
npm install @vue/composition-api --save

// Vue3（完整注冊(cè)，包含全局配置，適配多場(chǎng)景）
import { createApp } from 'vue';
import App from './App.vue';
import VueVirtualScroller from 'vue-virtual-scroller';
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'; // 必須引入樣式，否則渲染錯(cuò)亂

const app = createApp(App);
// 全局配置虛擬列表，優(yōu)化性能（可選，根據(jù)項(xiàng)目需求調(diào)整）
app.use(VueVirtualScroller, {
  itemSize: 50, // 全局默認(rèn)單個(gè)列表項(xiàng)高度，避免每個(gè)頁面重復(fù)設(shè)置
  buffer: 200, // 可視區(qū)域上下緩沖高度，減少滾動(dòng)時(shí)的空白閃爍
  windowResizeDebounce: 100 // 窗口 resize 防抖時(shí)間，優(yōu)化窗口縮放時(shí)的渲染性能
});
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)
});

<template>
  <div class="virtual-list-container" style="height: 500px; overflow-y: auto; border: 1px solid #eee;">
    <!-- 虛擬列表組件（補(bǔ)充異常處理模板） -->
    <RecycleScroller
      class="scroller"
      :items="bigList" // 十萬條數(shù)據(jù)數(shù)組（支持響應(yīng)式更新）
      :item-size="50" // 單個(gè)列表項(xiàng)固定高度（與樣式一致）
      key-field="id" // 列表項(xiàng)唯一標(biāo)識(shí)（必須，建議用后端返回的唯一ID）
      :buffer="200" // 局部緩沖配置，覆蓋全局配置
      @scroll="handleScroll" // 滾動(dòng)事件，可用于埋點(diǎn)、下拉加載等
    >
      <!-- 列表項(xiàng)模板（優(yōu)化結(jié)構(gòu)，避免復(fù)雜嵌套） -->
      <template #default="{ item }">
        <div class="list-item" @click="handleItemClick(item)">
          <span class="item-id">{{ item.id }}</span>
          <span class="item-name">{{ item.name }}</span>
          <span class="item-content">{{ item.content }}</span>
        </div>
      </template>
      <!-- 空數(shù)據(jù)模板（落地必備，避免無數(shù)據(jù)時(shí)空白） -->
      <template #empty>
        <div class="empty-tip">暫無數(shù)據(jù)</div>
      </template>
      <!-- 加載中模板（適配數(shù)據(jù)接口請(qǐng)求場(chǎng)景） -->
      <template #loading>
        <div class="loading-tip">數(shù)據(jù)加載中...</div>
      </template>
    </RecycleScroller>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
// 引入接口請(qǐng)求函數(shù)（模擬實(shí)際項(xiàng)目接口請(qǐng)求）
import { getBigList } from '@/api/data';
// 十萬條數(shù)據(jù)數(shù)組（響應(yīng)式）
const bigList = ref([]);
// 加載狀態(tài)（用于接口請(qǐng)求時(shí)的loading提示）
const isLoading = ref(false);
// 滾動(dòng)偏移量（可選，用于埋點(diǎn)或滾動(dòng)位置記錄）
const scrollTop = ref(0);
// 生成測(cè)試數(shù)據(jù)（模擬接口返回，實(shí)際項(xiàng)目替換為接口請(qǐng)求）
const generateData = () => {
  const data = [];
  for (let i = 1; i <= 100000; i++) {
    data.push({
      id: i, // 唯一標(biāo)識(shí)，建議用后端返回的ID，避免重復(fù)
      name: `測(cè)試數(shù)據(jù)${i}`,
      content: `這是Vue渲染十萬條數(shù)據(jù)的測(cè)試內(nèi)容，序號(hào)${i}`
    });
  }
  return data;
};
// 列表項(xiàng)點(diǎn)擊事件（落地必備，處理交互邏輯）
const handleItemClick = (item) => {
  console.log('當(dāng)前點(diǎn)擊項(xiàng)：', item);
  // 實(shí)際項(xiàng)目中可跳轉(zhuǎn)詳情頁、彈窗等操作
};
// 滾動(dòng)事件（可選，用于埋點(diǎn)、滾動(dòng)位置保存）
const handleScroll = (e) => {
  scrollTop.value = e.target.scrollTop;
  // 埋點(diǎn)示例：記錄用戶滾動(dòng)深度
  // trackEvent('virtual_list', 'scroll', 'scroll_depth', scrollTop.value);
};
// 頁面掛載后初始化數(shù)據(jù)（落地細(xì)節(jié)：接口請(qǐng)求+異常捕獲+內(nèi)存優(yōu)化）
onMounted(async () => {
  try {
    isLoading.value = true;
    // 實(shí)際項(xiàng)目中替換為接口請(qǐng)求，避免前端一次性生成大量數(shù)據(jù)（節(jié)省前端內(nèi)存）
    // const res = await getBigList(); // 接口請(qǐng)求十萬條數(shù)據(jù)（建議后端分批返回，前端拼接）
    // bigList.value = Object.freeze(res.data); // 靜態(tài)數(shù)據(jù)凍結(jié)，減少響應(yīng)式開銷
    bigList.value = Object.freeze(generateData()); // 模擬接口返回，凍結(jié)數(shù)據(jù)
  } catch (error) {
    console.error('數(shù)據(jù)加載失?。?, error);
    // 異常處理：加載失敗提示，可提供重試按鈕
    ElMessage.error('數(shù)據(jù)加載失敗，請(qǐng)重試');
  } finally {
    isLoading.value = false;
  }
});
// 組件卸載時(shí)清理數(shù)據(jù)（落地細(xì)節(jié)：內(nèi)存釋放，避免內(nèi)存泄漏）
onUnmounted(() => {
  bigList.value = [];
  scrollTop.value = 0;
});
</script>
<style scoped>
.scroller {
  height: 100%;
}
.list-item {
  height: 50px; // 與item-size嚴(yán)格一致，避免渲染錯(cuò)亂
  line-height: 50px;
  border-bottom: 1px solid #eee;
  padding: 0 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.list-item:hover {
  background-color: #f5f5f5; // 優(yōu)化交互體驗(yàn)， 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; // 避免內(nèi)容換行，導(dǎo)致列表項(xiàng)高度變化
}
.empty-tip, .loading-tip {
  text-align: center;
  padding: 20px;
  color: #666;
}
</style>

<template>
  <div class="batch-list-container">
    <!-- 分批渲染的列表（添加滾動(dòng)容器，避免頁面過長） -->
    <div class="list-wrapper" style="height: 600px; overflow-y: auto; border: 1px solid #eee;">
      <div class="list-item" v-for="item in renderList" :key="item.id">
        <span class="item-id">{{ item.id }}</span>
        <span class="item-name">{{ item.name }}</span>
        <span class="item-content">{{ item.content }}</span>
      </div>
    </div>
    <!-- 加載狀態(tài)（優(yōu)化樣式，提升用戶體驗(yàn)） -->
    <div class="loading" v-if="isLoading">
      <div class="loading-spinner"></div>
      <span>加載中...（{{ renderList.length }}/100000）</span>
    </div>
    <!-- 加載失敗提示（落地必備，異常處理） -->
    <div class="load-fail" v-if="isLoadFail" @click="retryRender">
      加載失敗，點(diǎn)擊重試
    </div>
    <!-- 渲染完成提示（可選，提升用戶體驗(yàn)） -->
    <div class="render-complete" v-if="!isLoading && !isLoadFail && renderList.length === bigList.length">
      已全部加載完成
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import { ElMessage } from 'element-plus';
// 引入接口請(qǐng)求函數(shù)（模擬實(shí)際項(xiàng)目接口請(qǐng)求）
import { getBatchData } from '@/api/data';
// 十萬條原始數(shù)據(jù)（非響應(yīng)式，節(jié)省內(nèi)存，僅用于存儲(chǔ)）
let bigList = [];
// 用于渲染的數(shù)組（響應(yīng)式，分批添加數(shù)據(jù)）
const renderList = ref([]);
// 加載狀態(tài)
const isLoading = ref(true);
// 加載失敗狀態(tài)
const isLoadFail = ref(false);
// 分批配置（落地細(xì)節(jié)：根據(jù)項(xiàng)目性能調(diào)整，適配不同設(shè)備）
const batchSize = ref(100); // 每批渲染數(shù)量，可根據(jù)設(shè)備性能動(dòng)態(tài)調(diào)整
const delay = ref(20); // 每批渲染間隔（ms），性能差的設(shè)備可增大至30-50ms
// 定時(shí)器標(biāo)識(shí)（用于組件卸載時(shí)清除定時(shí)器，避免內(nèi)存泄漏）
let renderTimer = null;
// 生成十萬條測(cè)試數(shù)據(jù)（模擬接口返回，實(shí)際項(xiàng)目替換為分批接口請(qǐng)求）
const generateData = () => {
  const data = [];
  for (let i = 1; i <= 100000; i++) {
    data.push({
      id: i,
      name: `測(cè)試數(shù)據(jù)${i}`,
      content: `這是Vue分批渲染十萬條數(shù)據(jù)的測(cè)試內(nèi)容，序號(hào)${i}`
    });
  }
  return data;
};
// 分批渲染函數(shù)（落地細(xì)節(jié)：異常處理+性能優(yōu)化+中斷控制）
const batchRender = async (data, start = 0) => {
  try {
    // 計(jì)算當(dāng)前批次的結(jié)束索引
    const end = Math.min(start + batchSize.value, data.length);
    // 批量添加數(shù)據(jù)（使用nextTick，確保DOM更新完成后再進(jìn)行下一批渲染）
    await nextTick(() => {
      renderList.value.push(...data.slice(start, end));
    });
    // 判斷是否渲染完成
    if (end < data.length) {
      // 清除上一個(gè)定時(shí)器，避免多個(gè)定時(shí)器疊加（防止卡頓）
      if (renderTimer) clearTimeout(renderTimer);
      // 延遲渲染下一批，給瀏覽器時(shí)間處理DOM
      renderTimer = setTimeout(() => {
        batchRender(data, end);
      }, delay.value);
    } else {
      isLoading.value = false; // 渲染完成，隱藏加載狀態(tài)
    }
  } catch (error) {
    console.error('分批渲染失敗：', error);
    isLoading.value = false;
    isLoadFail.value = true;
    ElMessage.error('數(shù)據(jù)渲染失敗，請(qǐng)重試');
  }
};
// 重試渲染函數(shù)（落地必備，處理渲染失敗場(chǎng)景）
const retryRender = () => {
  isLoadFail.value = false;
  isLoading.value = true;
  renderList.value = []; // 清空已渲染數(shù)據(jù)，重新開始渲染
  batchRender(bigList);
};
// 動(dòng)態(tài)調(diào)整批次配置（落地細(xì)節(jié)：適配不同設(shè)備性能）
const adjustBatchConfig = () => {
  // 判斷設(shè)備性能（簡單判斷，可根據(jù)實(shí)際需求優(yōu)化）
  const isLowPerformance = navigator.hardwareConcurrency < 4; // 核心數(shù)小于4，視為低性能設(shè)備
  if (isLowPerformance) {
    batchSize.value = 50; // 低性能設(shè)備，減少每批渲染數(shù)量
    delay.value = 30; // 增大渲染間隔，避免卡頓
  } else {
    batchSize.value = 100;
    delay.value = 20;
  }
};
// 頁面掛載后開始分批渲染（落地細(xì)節(jié)：接口請(qǐng)求+配置調(diào)整+內(nèi)存優(yōu)化）
onMounted(async () => {
  try {
    adjustBatchConfig(); // 初始化時(shí)調(diào)整批次配置，適配設(shè)備性能
    isLoading.value = true;
    // 實(shí)際項(xiàng)目中，替換為分批接口請(qǐng)求（每次請(qǐng)求100條，減少接口壓力）
    // bigList = [];
    // for (let i = 1; i <= 100; i++) { // 分100次請(qǐng)求，每次1000條
    //   const res = await getBatchData({ page: i, pageSize: 1000 });
    //   bigList.push(...res.data);
    // }
    bigList = generateData(); // 模擬接口返回，非響應(yīng)式存儲(chǔ)，節(jié)省內(nèi)存
    await batchRender(bigList);
  } catch (error) {
    console.error('數(shù)據(jù)加載失敗：', error);
    isLoading.value = false;
    isLoadFail.value = true;
    ElMessage.error('數(shù)據(jù)加載失敗，請(qǐng)重試');
  }
});
// 組件卸載時(shí)清理資源（落地細(xì)節(jié)：清除定時(shí)器+釋放內(nèi)存）
onUnmounted(() => {
  if (renderTimer) clearTimeout(renderTimer);
  bigList = [];
  renderList.value = [];
});
</script>
<style scoped>
.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;
}
</style>

<template>
  <div class="virtual-table-container" style="padding: 20px;">
    <!-- 虛擬滾動(dòng)表格（落地細(xì)節(jié)：完整配置+異常處理） -->
    <el-table
      :data="bigList"
      :height="600" // 固定表格高度，必須設(shè)置，否則虛擬滾動(dòng)失效
      border
      stripe // 斑馬紋，提升表格可讀性
      :row-key="(row) => row.id" // 行唯一標(biāo)識(shí)，避免渲染錯(cuò)亂（必須）
      v-infinite-scroll="loadMore" // 可選：下拉加載更多（適配接口分批請(qǐng)求）
      infinite-scroll-disabled="isLoading || isLoadComplete"
      infinite-scroll-distance="50" // 滾動(dòng)距離底部50px時(shí)觸發(fā)下拉加載
      @selection-change="handleSelectionChange" // 多選事件（落地必備，處理表格多選）
    >
      <!-- 多選列（可選，根據(jù)項(xiàng)目需求添加） -->
      <el-table-column type="selection" width="55" />
      <el-table-column label="序號(hào)" prop="id" width="100" align="center" />
      <el-table-column label="名稱" prop="name" width="200" />
      <el-table-column label="內(nèi)容" prop="content" min-width="300" />
      <!-- 操作列（落地必備，處理表格操作） -->
      <el-table-column label="操作" width="180" align="center">
        <template #default="{ row }">
          <el-button size="small" type="primary" @click="handleView(row)">查看</el-button>
          <el-button size="small" type="text" @click="handleEdit(row)">編輯</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 加載狀態(tài)（覆蓋表格，提升用戶體驗(yàn)） -->
    <div class="table-loading" v-if="isLoading">
      <div class="loading-spinner"></div>
      <span>數(shù)據(jù)加載中...</span>
    </div>
    <!-- 空數(shù)據(jù)提示（落地必備） -->
    <div class="table-empty" v-if="!isLoading && bigList.length === 0">
      暫無數(shù)據(jù)
    </div>
    <!-- 加載失敗提示（落地必備） -->
    <div class="table-load-fail" v-if="isLoadFail" @click="retryLoad">
      加載失敗，點(diǎn)擊重試
    </div>
    <!-- 加載完成提示（可選） -->
    <div class="table-load-complete" v-if="!isLoading && isLoadComplete">
      已加載全部數(shù)據(jù)
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { ElTable, ElTableColumn, ElButton, ElMessage, ElLoading } from 'element-plus';
// 引入接口請(qǐng)求函數(shù)（模擬實(shí)際項(xiàng)目接口請(qǐng)求）
import { getTableData } from '@/api/data';
// 十萬條表格數(shù)據(jù)（響應(yīng)式，用于表格渲染）
const bigList = ref([]);
// 加載狀態(tài)
const isLoading = ref(true);
// 加載失敗狀態(tài)
const isLoadFail = ref(false);
// 加載完成狀態(tài)（下拉加載時(shí)使用）
const isLoadComplete = ref(false);
// 當(dāng)前頁碼（用于分批接口請(qǐng)求）
const currentPage = ref(1);
// 每頁條數(shù)（用于分批接口請(qǐng)求）
const pageSize = ref(1000);
// 選中的行數(shù)據(jù)（用于多選操作）
const selectedRows = ref([]);
// 生成十萬條測(cè)試數(shù)據(jù)（模擬接口返回，實(shí)際項(xiàng)目替換為分批接口請(qǐng)求）
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 <= end; i++) {
    data.push({
      id: i,
      name: `表格數(shù)據(jù)${i}`,
      content: `這是Vue虛擬滾動(dòng)表格測(cè)試內(nèi)容，序號(hào)${i}`
    });
  }
  return data;
};
// 加載表格數(shù)據(jù)（落地細(xì)節(jié)：分批請(qǐng)求+異常處理+加載狀態(tài)控制）
const loadTableData = async () => {
  try {
    isLoading.value = true;
    isLoadFail.value = false;
    // 實(shí)際項(xiàng)目中，替換為分批接口請(qǐng)求（每次請(qǐng)求1000條，減少接口壓力）
    // const res = await getTableData({ page: currentPage.value, pageSize: pageSize.value });
    // const newData = res.data;
    const newData = generateData(currentPage.value, pageSize.value); // 模擬接口返回
    // 拼接數(shù)據(jù)（下拉加載時(shí)追加，首次加載時(shí)覆蓋）
    if (currentPage.value === 1) {
      bigList.value = Object.freeze(newData); // 靜態(tài)數(shù)據(jù)凍結(jié)，減少響應(yīng)式開銷
    } else {
      bigList.value = [...bigList.value, ...Object.freeze(newData)];
    }
    // 判斷是否加載完成（當(dāng)前頁數(shù)據(jù)小于每頁條數(shù)，說明已加載全部）
    if (newData.length < pageSize.value) {
      isLoadComplete.value = true;
    } else {
      currentPage.value++; // 頁碼自增，用于下一次下拉加載
    }
  } catch (error) {
    console.error('表格數(shù)據(jù)加載失?。?, error);
    isLoadFail.value = true;
    ElMessage.error('數(shù)據(jù)加載失敗，請(qǐng)重試');
  } finally {
    isLoading.value = false;
  }
};
// 下拉加載更多（適配分批接口請(qǐng)求場(chǎng)景）
const loadMore = async () => {
  if (isLoadComplete || isLoading) return; // 已加載完成或正在加載，不觸發(fā)
  await loadTableData();
};
// 重試加載（落地必備，處理加載失敗場(chǎng)景）
const retryLoad = () => {
  currentPage.value = 1;
  isLoadComplete.value = false;
  loadTableData();
};
// 表格多選事件（落地必備，處理多選操作）
const handleSelectionChange = (val) => {
  selectedRows.value = val;
  console.log('選中的行：', selectedRows.value);
};
// 查看操作（落地必備，處理表格行查看）
const handleView = (row) => {
  console.log('查看行數(shù)據(jù)：', row);
  // 實(shí)際項(xiàng)目中可跳轉(zhuǎn)詳情頁、彈窗顯示詳情等
};
// 編輯操作（落地必備，處理表格行編輯）
const handleEdit = (row) => {
  console.log('編輯行數(shù)據(jù)：', row);
  // 實(shí)際項(xiàng)目中可彈窗編輯、跳轉(zhuǎn)編輯頁等
};
// 頁面掛載后初始化表格數(shù)據(jù)（落地細(xì)節(jié)：初始化配置+數(shù)據(jù)加載）
onMounted(() => {
  // 初始化表格虛擬滾動(dòng)配置（可選，根據(jù)項(xiàng)目需求調(diào)整）
  // ElTable的虛擬滾動(dòng)默認(rèn)啟用，若需自定義配置，可通過table-layout、scroll-x等屬性調(diào)整
  loadTableData();
});
// 組件卸載時(shí)清理數(shù)據(jù)（落地細(xì)節(jié)：釋放內(nèi)存，避免內(nèi)存泄漏）
onUnmounted(() => {
  bigList.value = [];
  selectedRows.value = [];
  currentPage.value = 1;
  isLoadComplete.value = false;
});
</script>
<style scoped>
.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; // 確保表格滾動(dòng)正常
}
</style>