不定高虚拟列表

配置

属性	类型	默认值	说明
props.autoRowHeight	boolean | AutoRowHeightConfig<DT>	false	是否开启自动行高
props.rowHeight	number	--	props.autoRowHeight 为 true 时，将表示为期望行高，用于计算。不再影响实际行高。

AutoRowHeightConfig<DT>

type AutoRowHeightConfig<DT> = {
    /** 期望行高 */
    expectedHeight?: number | ((row: DT) => number);
};

期望行高

预计一行的高度为多少，用于计算当前表格高度下，能放下几行。

优先级

props.autoRowHeight.expectedHeight > props.rowHeight

示例

loading

如果你你想控制单元格上下的padding，可以通过覆盖css变量实现：

.stk-table {
    --cell-padding-y: 8px;
}

单列表

请移步至虚拟单列表-不等高

使用 Pretext 预计算行高

当行高可以通过内容提前计算得出时，推荐使用 @chenglou/pretext 进行预计算，避免运行时测量行高带来的性能开销。同时防止滚动条抖动。

原理

1. 开启 auto-row-height 和 virtual
2. 使用 prepare 和 layout 方法计算文本高度
3. 通过 setAutoHeight(rowKey, height) 设置每行的实际高度

示例

loading

API

setAutoHeight(rowKey, height)

手动设置指定行的行高。

参数	类型	说明
rowKey	string | number	行的唯一标识，与 row-key 对应
height	number	行高度

提示

• 需要在数据加载完成后调用
• 如果行高发生变化，需要重新调用此方法更新
• 传入 null 或 undefined 可以清除已设置的行高，恢复自动测量