はじめに
stk-table-vue（stk: sticky）は、sticky、vue、DOM に基づいた高性能仮想テーブルです。動的データ表示シナリオに適しています。
stk-table-vue を開発した理由
このコンポーネントを作成した理由は、2022年頃にウェブ上で動的データを表示する必要に迫られたことに遡ります。当時、いくつかの主流のテーブルコンポーネントを調査しましたが、このビジネスシナリオに完璧にマッチするものが見つからなかったため、自分で実装することにしました。
最初は基本的な仮想リストだけを実装しました。約3年間の改訂を経て、テーブルとしての基本機能を徐々に備えたことに気づき、オープンソース化することにしました。
主要なテーブルを調査した後、一般的な方向性を確認しました：
パフォーマンス優先。 パフォーマンスは主要な目標です。動的データ表示にはできるだけ高いパフォーマンスが必要なため、コンポーネントの一部の使用方法やAPI設計はパフォーマンスに妥協する可能性があります。
パッケージサイズの制御。 できるだけ少数でシンプルな方法でテーブル機能を実装します。
DOMベース。 DOMベースすることで、Vueコンポーネントライブラリとのシームレスな統合が容易になります。また、DOMパフォーマンスには大きな自信があります。さまざまなコストを考慮した結果、Canvas実装を断念しました。
CSS sticky を使用した固定列とヘッダー。 この解決策は、ヘッダーと列を別のテーブルで覆う必要があった従来の方法と比較して、コード量を大幅に削減します。 たまたま固定列にもstickyを実装でき、全く新しいインタラクションを実現しました。試してみる。
宣言型カスタムスロット。
ant-design-vueテーブルのカスタムセルアプローチを借用しました。<template>の#slotでカスタムセルを使用するよりもはるかに優雅です。組み込みハイライト。 アニメーションAPIを使用してハイライトアニメーションを実装し、サードパーティライブラリの依存関係を排除します。
table タグを使用。 一部のコンポーネントはパフォーマンスを向上させるために
divでテーブルをレンダリングします。しかし、デフォルトの<table>機能（レイアウト、コピー、印刷など）を実装するには、多くの追加コードが必要になり、パッケージサイズの制御に不利です。 パフォーマンスの点では、主観的には div と table の実装間に大きな違いはありません。
stk-table-vue のカスタマイズ
多くの基本的なテーブル機能が網羅的ではないかもしれませんが、二次開発の余地は十分あり、一部の機能は自分で実装できます。
例えば、ヘッダークリックの
フィルター機能。フィルター機能に関しては、実際の開発では異なるプロジェクトが異なるコンポーネントライブラリとスタイルを使用することを考慮すると、組み込みフィルター機能を提供することは：1. 全体のスタイルに影響を与える可能性がある; 2. パッケージサイズの制御に悪影響を与える可能性がある。 因此、まだ実装されていません。排序 cannot click individual arrows.
これもカスタムヘッダーセルをカスタマイズすることで実現できます。
スタイルは
.stk-tableセレクタ配下のCSS変数で変更できます。
巨人の肩に乗る
コンポーネントの一部の設計とAPIは、vxe-table、ant-design-vue、navie-ui などの優れたプロジェクトを参照しています。ここで感謝を表します。