ツリー ^0.7.0

2ステップでツリー機能を有効にします

StkTableColumn['type'] を tree-node に設定して、ツリー展開ボタンの位置を指定します

const columns: StkTableColumn<any>[] = [
    { type: 'tree-node', title: '地域', dataIndex: 'area' },
]

データソースに children フィールドを追加します。クリック後、データ内の children フィールドのコンテンツが子ノードとして表示されます。

export const getDataSource = () => [ 
    {
        area: 'アジア',
        gdp: 10000,
        population: 50000000,
        gdpPerCapita: 20000,
        children: [
            { area: '中国', gdp: 5000, population: 1400000000, gdpPerCapita: 35000, }, 
            { area: '日本', gdp: 4000, population: 126000000, gdpPerCapita: 33000, }
        ],
    },
];

シンプルツリー

デフォルト展開ノード

すべて展開

treeConfig.defaultExpandAll = true

特定レベルまで展開

treeConfig.defaultExpandLevel = 1

特定ノードを展開

treeConfig.defaultExpandedKeys = ['アジア', '中国', '浙江']

仮想リスト

注意

コンポーネントは各行のdataSourceに __T_EXP__ フィールドを注入して、展開されているかどうかを制御します。行のデータを更新するときにこのフィールドを変更しないでください。因此、例ではObject.assignを使用してデータを更新しています。

パフォーマンス注意

仮想リストがあっても、props.dataSource の変更ごとにコンポーネントが内部でdataSourceを走査してデータをフラット化します。因此、频繁に変わるデータについては、より多くのコンピュータ計算リソースを占有します。特定のパフォーマンス要件がある場合は、例 - 大量データを参照してツリー展開ロジックを自分で実装できます。

排序

デフォルトでは、テーブルヘッダーをクリックして排序”时、現在のレベルのデータのみが排序されます。子ノードも排序する必要がある場合は、sortConfig.sortChildren = true を設定する必要があります。 v0.8.8

詳細については、排序を参照してください。

ツリー ^0.7.0 ​

シンプルツリー ​

デフォルト展開ノード ​

すべて展開 ​

特定レベルまで展開 ​

特定ノードを展開 ​

仮想リスト ​

排序 ​