行展開

列設定に type: 'expand' を追加して、列を組み込みの展開可能セルとして設定します。次に、snippet expand({ row, col }) を設定して展開コンテンツを設定します。

WARNING

現在、展開行が設定されている場合、仮想リストは最初のデータ項目から行の高さを累積して上部距離を計算するため、データ量が多いとパフォーマンス問題が発生する可能性があります。

例

基本展開

カスタム展開セル

API

StkTableColumn 設定

StkTableColumn['type'] = 'expand' を設定して列を展開可能にします。

const columns = [
    { type: 'expand', dataIndex: '', title: '' }
]

snippet

{#snippet expand({ row, col })} 展開行のコンテンツを設定します。

html

<StkTable>
    <template #expand="{ row, col }">
        {{ row[col.dataIndex]}}
    </template>
</StkTable>

snippet パラメータ	説明
row	展開行のデータ
col	行展開をトリガーする列

props

props.expandConfig

プロパティ	型	デフォルト	説明
height	number	テーブル行の高さ	展開行の高さ

expose

コンポーネントメソッドを呼び出して行を展開または折りたたむことができます。

/**
 * 展开或收起某一行
 * @param rowKeyOrRow 行唯一键或行对象
 * @param expand 是否展开
 * @param data.col 列配置
 * @param data.silent 设为true则不触发 `onToggleRowExpand`, 默认:false
 */
setRowExpand(
    rowKeyOrRow: string | undefined | DT,
    expand?: boolean,
    data?: { 
        col?: StkTableColumn<DT>; 
        silent?: boolean 
    }
):void

行展開 ​

例 ​

基本展開 ​

カスタム展開セル ​

API ​

StkTableColumn 設定 ​

snippet ​

props ​

expose ​

行展開

例