在 Vue 3 和 React 中,el-table 那种“虚拟滚动+动态行高”到底该怎么落地?
表格组件在后台系统里几乎是刚需,但当数据量上千行、每行内容高度又不固定时,浏览器会直接卡成幻灯片。很多人第一反应是找现成的虚拟滚动库,可用在 el-table 或 antd Table 上时,往往发现它们只支持固定行高,稍微有点换行、图片或自定义插槽,滚动条就开始乱跳。这背后的核心矛盾是:虚拟滚动依赖精确的偏移量计算,而动态行高让每个元素的高度在渲染前无法预知。我在实际项目里处理过带折叠面板、多行文本和操作按钮的十万级数据表格,最终选择用 IntersectionObserver 配合占位元素来动态测量真实高度,再结合二分查找定位可视区域。这篇文章会从实际代码出发,讲清楚怎么在 Vue 3 和...