1. 什么是虚拟列表？它解决了什么问题？本项目在哪些场景下用到了虚拟列表？
答案：
虚拟列表（Virtual List）是一种只渲染可视区域内数据项的技术，适用于长列表或大数据量表格，能显著提升渲染性能和滚动流畅度。它通过动态复用少量 DOM 节点，避免一次性渲染全部数据导致页面卡顿。本项目在 web-admin/src/components/VirtualTable.vue 中实现了虚拟列表，用于如产品、新闻等数据量较大的表格页面，提升了用户体验和前端性能。
2. 虚拟列表的核心原理是什么？在本项目的 VirtualTable.vue 组件中是如何实现的？
答案：
虚拟列表的核心原理是：只渲染可视区域内的少量数据项，通过计算滚动位置动态切换渲染内容，并用一个“占位容器”撑起整体滚动高度。在本项目的 VirtualTable.vue 组件中，通常会：
- 计算当前可见的起始和结束索引
- 只渲染这部分数据
- 用一个大容器设置总高度，内部用
transform: translateY或margin-top实现内容的正确位置 这样即使有上千条数据，页面也只渲染几十个 DOM 节点，极大提升性能。
3. 虚拟列表如何与分页、搜索等功能结合？本项目是如何处理的？
答案：
虚拟列表和分页通常不会同时使用：分页适合后端数据量大、每次只取一页，虚拟列表适合前端已拿到大批量数据时优化渲染。在本项目中，如果数据量较大且全部加载到前端（如本地 CSV 数据或一次性接口返回），就用虚拟列表优化渲染；如果是后端分页，则每页数据量较小，不需要虚拟列表。
搜索时，虚拟列表会根据过滤后的数据动态调整可见项和滚动高度，保证体验一致。
4. 虚拟列表在本项目中遇到过哪些实际问题？如何解决的？
答案：
常见问题包括：
- 行高不一致：虚拟列表通常假设每行高度一致，否则滚动计算会出错。本项目中通过固定行高或动态测量行高解决。
- 滚动异常：如数据量变化时滚动条跳动，通过重置滚动位置或监听数据变化及时更新虚拟列表参数解决。
- 与表格组件集成：如 Element Plus Table 结合虚拟滚动时，需自定义渲染逻辑或使用第三方库（如 vue-virtual-scroll-list）解决兼容性问题。
5. 如何测试和验证虚拟列表的性能提升？本项目是如何做的？
答案：
可以通过以下方式测试虚拟列表性能：
- 使用 Chrome DevTools 观察 DOM 节点数量，虚拟列表应只渲染可见项（几十个），而非全部数据
- 滚动大数据量列表时，页面应保持流畅不卡顿
- 对比未使用虚拟列表时的渲染性能和内存占用
本项目在开发 VirtualTable.vue 时，通过插入上千条测试数据，实际滚动和监控 DOM 数量，验证了虚拟列表的性能优势。
