#2 Dテーブルの行ヘッダーと列ヘッダーの固定を実現するソリューション

ビジネスでは、2 Dテーブルの最初の行と最初の列を固定する必要があることがよくあります.ここでは,2次元テーブルの固定行と列のいくつかの解決策を検討する.自己学習と成果を記録する過程として.プロジェクトコードgithubアドレス
1つ目:position stickyのソリューション

cssレイアウト

は上下に配置され、下のコンテンツ領域は高さを固定し、コンテンツy軸方向はスクロールバーを超え、簡単に最初の行の固定を実現した.(ただし、内容x軸方向の内容が超える、左列が固定されていない)

.

positionの新しい属性を利用して、sticky left: 0; top: 0;、内容x軸方向の内容がスクロールバーを超えて、左の最初の列の固定を実現します.(ただし、上の行はx軸方向のスクロールバーに従って転がることができなかった)

.

x軸方向のスクロールイベントを傍受eventを取得する.scrollLeft値は、上の最初の行のコンテンツ領域transform: translateX(${scrollLeft}px)にタイムリーに同期し、最初の行の同時スクロール効果を実現する.(この時点では1行目の1列固定が実現する)

複数行の複数列固定は、最初の行の最初の列固定案と同じように、自分で脳で補うことができる.

データレンダリング

のバックエンドからのデータは、1.行ヘッダーリスト:オブジェクト配列(一意のid属性がある).2.カラムヘッダリスト:オブジェクト配列(一意のid属性がある).コンテンツ領域:オブジェクト配列(行頭列ヘッダ配列項目一意idが同時にあり、x軸y軸座標に相当)が一致します.

文字の描写が渋い.参照demo:src/components/demo-pos-sticky.vueデータシミュレーション:src/components/mock.js
2つ目:position absoluteのソリューション
フォローアップ...