行の高さ

TIP

上記の行の高さの設定と props.expandConfig.height はいずれも動的に変更できます。変更後、コンポーネントは表示行数とスクロール高さを自動的に再計算するため、initVirtualScroll を手動で呼び出す必要はありません。

フッター行はスクロール領域の下部に固定表示（sticky）されるため、仮想スクロールの総高さには含まれません。

例

以下では、ヘッダーの行の高さを 50px、ボディの行の高さを 40px に設定します。

vue

<template>
    <StkTable row-height="40" header-row-height="50"></StkTable>
</template>

INFO

通常（非仮想リスト）モードでは、コンテンツが行の高さを超えると、行の高さが拡張されます。

仮想リストモードでは、行の高さは常に設定値になります。

仮想リストが有効な場合、スクロールにより列幅が変化する場合がありますが、これは列幅が設定されていないためです。

まず、<StkTable> コンポーネントの高さが十分である必要があります。flex や grid などの柔軟なレイアウトに配置するか、高さを 100% に設定して、親要素がその高さを決めるようにします（子要素によって拡張されません）。

次に、.stk-table .stk-table-scroll-container の flex を 1 に設定します。

以下のようになります

css

:deep(.stk-table .stk-table-scroll-container) {
    flex: 1;
}

以下の高さコントローラーをドラッグして、フレキシブル行高さを確認してください。

これは 行数が固定 のテーブルに便利です。

INFO

高さを一定まで減らすと、最小の高さはまだテーブル内のコンテンツによって決められていることがわかります（min-content）。