鉴于数据列表展示过多导致节点渲染过多导致页面卡顿或死机，特地封装了一个简单的虚拟列表。在此基础上，可以按照vue3+elementplus+ts+tailwindcss的开发设计思路修改组件，分为三部分：父容器占用空间；一个子容器显示滚动条计算的数据，相当于一个真正的渲染节点；子容器作为虚拟列表，不渲染列表，提供列表真实高度，显示滚动条，实现页面结构>/div><!--Slot-->样式修饰元素加滚动条style.scrollbar_custom{:deep(.el-scrollbar__wrap){.el-scrollbar__view{@applyrelative;}}逻辑组件所需参数constprop=defineProps({//自定义类名customClass:String,//相关配置选项:{type:Object,default:()=>{return{};},},listData:{类型：数组，默认：()=>{return[];},},});组件内部定义//组件记录（默认）constvirtualRecord=reactive({height:400,//显示数个visibleCount:16,////刷新频率timeout:4,////行高itemHeight:40,//translateYoffsetoffset:0,//虚拟占用高度virtualHeight:300,//记录滚动高度recordScrollTop:0,dataList:[]asany[],//可显示数据visibleData:[]asany[],});//合并配置constmergeFn=()=>{virtualRecord.height=prop.option.height||400；virtualRecord.dataList=JSON.parse(JSON.stringify(prop.listData));虚拟记录.item高度=prop.option.itemHeight||40；virtualRecord.timeout=prop.option.timeout||4;////虚拟高度virtualRecord.virtualHeight=prop.listData.length*virtualRecord.itemHeight;//显示数量virtualRecord.visibleCount=Math.ceil(virtualRecord.height/virtualRecord.itemHeight);};滚动计算letlastTime=0;consthandleScroll=(scroll:{scrollTop:number})=>{letcurrentTime=+new日期（）;if(currentTime-lastTime>virtualRecord.timeout){virtualRecord.recordScrollTop=scroll.scrollTop;updateVisibleData(scroll.scrollTop);最后时间=当前时间；}};constupdateVisibleData=(scrollTop:number)=>{letstart=Math.floor(scrollTop/virtualRecord.itemHeight)-Math.floor(virtualRecord.visibleCount/2);开始=开始<0?0：开始；constend=start+virtualRecord.visibleCount*2;virtualRecord.visibleData=virtualRecord.dataList.slice(开始,结束);virtualRecord.offset=开始*virtualRecord.itemHeight;};列表信息变化watch(()=>{return[prop.listData,prop.option];},([newData,newHeight])=>{if(newData){//合并数据mergeFn();//更新视图updateVisibleData(virtualRecord.recordScrollTop);}},{immediate:true,});使用{{item}}
