如何在不出滚动条的前提下优雅的渲染大数据量table

背景:工作中遇到了vue展开的table,展开行中数据可编辑,下拉框等数据量比较大,然后table是没有滚动条的,所以采用这个方法每次渲染单个数据,整体渲染效果非常好,页面加载性能提升非常明显,整体页面加载由最开始的20+秒到现在的秒开,速度提升超过90%

方法说出来其实很简单,就是每次只渲染部分数据然后依次往tabledata里面添加,用到的知识点是vue中diff算法的复用,需要设置key(最好不要是index) 大致的实现如下

function spread(num: number, index = 0, ids: string[]){  
const keys: string[] = []; 
for (let i = 0; i < 50; i++)
    {if (num <= 0) break;
        num--; 
        index++;  
        keys.push(ids[index]);
    }
if (num > 0) {   
    timer = setTimeout(() => {     
        return spread(num, index, ids);  
    },600); }  
expandedKeys.value = [...expandedKeys.value, ...keys]; }

  

• spread方法就是用来做这个任务拆分操作的接收三个参数num，index，ids

• for循环i < 50，表示每次渲染50条，可依据个人需求作调整

• setTimeout 中表示 600ms渲染一次，可依据个人需求作调整