data:接口拿的全部数据
tableData:渲染表格的数据
Promise:支持异步方便做loading状态处理
1w条数据在开启虚拟表格的情况下一般2s左右即可完成渲染,当然具体还是取决于客户端性能
updateTableDataInBatches(data) {
return new Promise((resolve) => {
let index = 0;
const pushBatch = () => {
// 首次渲染50 后续100
const batchSize = index === 0 ? 50 : 100;
// 计算当前批次的数据
const batch = data.slice(index, index + batchSize);
// 分批次更新tableData
this.tableData.push(...batch);
// 更新索引
index += batchSize;
// 如果还有数据没处理完,继续处理
if (index < data.length) {
setTimeout(pushBatch, 0); // 异步调用,防止阻塞UI线程
} else {
// 如果所有批次都已推送完,调用 resolve 以表示处理完成
resolve();
}
};
// 初始化分批处理
pushBatch();
});
},