@@ -105,10 +105,10 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
|
105 | 105 | */ |
106 | 106 | overscan?: number |
107 | 107 | /** |
108 | | - * Estimated size (in px) of each item |
| 108 | + * Estimated size (in px) of each item, or a function that returns the size for a given index |
109 | 109 | * @defaultValue 65 |
110 | 110 | */ |
111 | | - estimateSize?: number |
| 111 | + estimateSize?: number | ((index: number) => number) |
112 | 112 | }) |
113 | 113 | /** |
114 | 114 | * The text to display when the table is empty. |
@@ -418,7 +418,24 @@ const virtualizer = !!props.virtualize && useVirtualizer({
|
418 | 418 | return rows.value.length |
419 | 419 | }, |
420 | 420 | getScrollElement: () => rootRef.value?.$el, |
421 | | - estimateSize: () => virtualizerProps.value.estimateSize |
| 421 | + estimateSize: (index: number) => { |
| 422 | + const estimate = virtualizerProps.value.estimateSize |
| 423 | + return typeof estimate === 'function' ? estimate(index) : estimate |
| 424 | + } |
| 425 | +}) |
| 426 | + |
| 427 | +const renderedSize = computed(() => { |
| 428 | + if (!virtualizer) { |
| 429 | + return 0 |
| 430 | + } |
| 431 | + |
| 432 | + const virtualItems = virtualizer.value.getVirtualItems() |
| 433 | + if (!virtualItems?.length) { |
| 434 | + return 0 |
| 435 | + } |
| 436 | + |
| 437 | + // Sum up the actual sizes of virtual items |
| 438 | + return virtualItems.reduce((sum: number, item: any) => sum + item.size, 0) |
422 | 439 | }) |
423 | 440 | |
424 | 441 | function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) { |
@@ -611,7 +628,7 @@ defineExpose({
|
611 | 628 | data-slot="tfoot" |
612 | 629 | :class="ui.tfoot({ class: [props.ui?.tfoot] })" |
613 | 630 | :style="virtualizer ? { |
614 | | - transform: `translateY(${virtualizer.getTotalSize() - virtualizer.getVirtualItems().length * virtualizerProps.estimateSize}px)` |
| 631 | + transform: `translateY(${virtualizer.getTotalSize() - renderedSize}px)` |
615 | 632 | } : undefined" |
616 | 633 | > |
617 | 634 | <tr data-slot="separator" :class="ui.separator({ class: [props.ui?.separator] })" /> |
|