复杂的cell, 大数据下，表格快速滚动卡顿

[zhiaiing]

在大量复杂的cell场景下， 快速滚动卡顿， 这种要怎么优化
https://github.com/user-attachments/assets/650d0b27-9ea4-449f-9492-7871b28ae0e9

[zhiaiing]

const ROW_COUNT = 100000;
const COL_COUNT = 120;
const numberFormatter = new Intl.NumberFormat('zh-CN');

function createRecords() {
const regions = ['华东', '华北', '华南', '西南', '东北'];
const statuses = ['进行中', '已完成', '待确认', '已暂停'];

return Array.from({ length: ROW_COUNT }, (_, index) => ({
id: index + 1,
account: 客户 ${String(index + 1).padStart(6, '0')},
region: regions[index % regions.length],
status: statuses[index % statuses.length],
amount: (index * 7919) % 100000,
updatedAt: 2026-${String((index % 12) + 1).padStart(2, '0')}-${String((index % 28) + 1).padStart(2, '0')}
}));
}

function createColumns(): VTable.ColumnsDefine {
const columns: VTable.ColumnsDefine = [
{
field: 'id',
title: '序号',
width: 88,
style: { textAlign: 'right' }
},
{
field: 'account',
title: '客户',
width: 156
}
];

for (let index = 2; index < COL_COUNT; index++) {
const metricIndex = index - 1;
if (metricIndex <= 10) {
columns.push({
field: checkbox_${metricIndex},
title: 勾选 ${metricIndex},
width: 220,
cellType: 'checkbox',
checked: args => (args.row + metricIndex) % 3 === 0,
style: {
textAlign: 'center',
checkboxStyle: {
checkedFill: '#1976d2'
}
}
});
continue;
}
if (metricIndex <= 20) {
columns.push({
field: switch_${metricIndex - 10},
title: 开关 ${metricIndex - 10},
width: 230,
cellType: 'switch',
checked: args => (args.row + metricIndex) % 2 === 0,
checkedText: '开',
uncheckedText: '关',
style: {
textAlign: 'center',
color: '#fff',
switchStyle: {
checkedFill: '#14804a'
}
}
});
continue;
}
if (metricIndex <= 30) {
columns.push({
field: button_${metricIndex - 20},
title: 操作 ${metricIndex - 20},
width: 220,
cellType: 'button',
text: args => ((args.row + metricIndex) % 2 === 0 ? '查看' : '处理'),
style: {
textAlign: 'center',
color: '#135fbd',
buttonStyle: {
buttonColor: '#eef5ff',
buttonBorderColor: '#a9c8ec',
buttonHoverColor: '#dcecff',
buttonHoverBorderColor: '#1976d2',
buttonBorderRadius: 4,
buttonPadding: 6
}
}
});
continue;
}
if (metricIndex <= 40) {
columns.push({
field: 'amount',
title: 进度 ${metricIndex - 30},
width: 240,
cellType: 'progressbar',
min: 0,
max: 100_000,
fieldFormat: record => ${Math.round(record.amount / 1000)}%,
style: {
textAlign: 'right',
barHeight: 7,
barBottom: 5,
barColor: metricIndex % 2 === 0 ? '#1976d2' : '#14804a',
barBgColor: '#e7ebef'
}
});
continue;
}
columns.push({
field: metric_${metricIndex},
title: 指标 ${metricIndex},
width: index % 7 === 0 ? 180 : 170,
fieldFormat: record => {
switch (index % 5) {
case 0:
return record.region;
case 1:
return record.status;
case 2:
return numberFormatter.format(record.amount + metricIndex * 17);
case 3:
return record.updatedAt;
default:
return ${record.id}-${metricIndex};
}
},
style: {
textAlign: index % 5 === 2 ? 'right' : 'left'
}
});
}

return columns;
}

const columns = createColumns();
const records = createRecords();
const tableInstance = new VTable.ListTable(container, {
columns,
records,
widthMode: 'standard',
defaultRowHeight: 36,
defaultHeaderRowHeight: 40,
frozenColCount: 2,
rightFrozenColCount: 2,
frozenRowCount: 3,
bottomFrozenRowCount: 2,
hover: {
highlightMode: 'cross'
},
select: {
highlightMode: 'cross'
},
theme: VTable.themes.ARCO.extends({
headerStyle: {
bgColor: '#eef2f6',
color: '#263340',
fontWeight: 600,
borderColor: '#d6dce3'
},
bodyStyle: {
color: '#344251',
borderColor: '#e1e5e9'
},
frameStyle: {
borderColor: '#bcc5cf',
borderLineWidth: 1
},
scrollStyle: {
visible: 'always',
width: 9,
hoverOn: true
}
})
});