el table sticky

el-テーブル-スティッキー

Element UI (Vue 2) テーブルのテーブル ヘッダーの天井、テーブルの末尾の天井、スクロール バーの下部の天井、および高さ適応機能を実装するために使用されるコマンド セット プラグイン。

背景

Element UI のテーブル コンポーネントを使用する場合、テーブル内のコンテンツが多すぎると、テーブルにスクロール バーが表示されますが、テーブル ヘッダーは先頭に移動せず、テーブルの末尾の合計行数は表示されません。このようにすると、テーブルに含まれるコンテンツが多すぎる場合、テーブルのヘッダーとテーブルの最後の合計行がブロックされます。この一連の問題点は、ユーザー エクスペリエンスに大きな影響を与えます。

要素 UI の解決策: max-heightまたはheight属性を設定することで、上記の要件を達成します。

要素 UI の欠点: 高さの値は数値の設定のみをサポートしており、実際の開発では JS を使用して計算する必要があることがよくあります。

上記の問題点/ニーズを解決し、開発コストと保守コストを削減するために、このプラグインが作成されました。詳細については、アイデア分析を参照してください。

特性

一部の命令は、 position: sticky属性に依存しているため、最新のブラウザーとオンラインの例のみをサポートしています。

• ヘッダー天井のサポート (v-sticky-header)
• テーブルテール合計行底部吸引をサポート (v-sticky-footer)
• 水平スクロールバーの下部吸引をサポート (v-sticky-scroller)
• サポート高さ適応型 (v-height-adaptive)

インストール

npm install @cell-x/el-table-sticky

登録手順

グローバル登録手順:

 import elTableSticky from '@cell-x/el-table-sticky'

Vue . use ( elTableSticky )

// 或者

Vue . use ( elTableSticky , {
  StickyHeader : {
    // 吸顶偏移量，可以是 CSS 支持的距离值，如 `0px`、`10%`、`calc(100vh - 1rem)` 等
    offsetTop : 0 ,
    // 滚动条吸底偏移量，可以是 CSS 支持的距离值，如 `0px`、`10%`、`calc(100vh - 1rem)` 等
    offsetBottom : 0 ,
  } ,
  StickyFooter : {
    // 吸底偏移量，可以是 CSS 支持的距离值，如 `0px`、`10%`、`calc(100vh - 1rem)` 等
    offsetBottom : 0 ,
  } ,
  StickyScroller : {
    // 吸底偏移量，可以是 CSS 支持的距离值，如 `0px`、`10%`、`calc(100vh - 1rem)` 等
    offsetBottom : 0 ,
  } ,
  HeightAdaptive : {
    // 底部偏移量，只能是数字型
    offsetBottom : 0 ,
  }
} )

部分的な登録手順:

 import {
  StickyHeader ,
  StickyFooter ,
  StickyScroller ,
  HeightAdaptive ,
} from '@cell-x/el-table-sticky'

export default {
  directives : {
    StickyHeader : new StickyHeader ( { offsetTop : 0 , offsetBottom : 0 } ) . init ( ) ,
    StickyFooter : new StickyFooter ( { offsetBottom : 0 } ) . init ( ) ,
    StickyScroller : new StickyScroller ( { offsetBottom : 0 } ) . init ( ) ,
    HeightAdaptive : new HeightAdaptive ( { offsetBottom : 0 } ) . init ( ) ,
  }
} 

使用

 < el-table v-sticky-header > ... </ el-table >
< el-table v-sticky-footer > ... </ el-table >
< el-table v-sticky-scroller > ... </ el-table >
< el-table v-height-adaptive > ... </ el-table > 

コマンドパラメータ

命令	説明する	修飾子	タイプ	デフォルト値
v-sticky-header	ヘッダー上限コマンド	.always	Object{Number, String}	オフセット上: 0、オフセット下: 0
v-sticky-footer	表の最後にある合計行が一番下の吸引コマンドです	.always	Object{Number, String}	オフセット下: 0
v-sticky-scroller	水平スクロールバー下部コマンド	.always	Object{Number, String}	オフセット下: 0
v-height-adaptive	適応性の高い指示	-	Object{Number}	オフセット下: 0

注意事項

• v-sticky-headerとv-sticky-footerにはスクロール バーの吸い込み機能が組み込まれており、 v-sticky-scrollerコマンドを再利用する必要はありません。
• v-sticky-headerとv-sticky-footer同時に使用すると、スクロール バーのoffsetBottom v-sticky-footer
• 水平スクロールバーのデフォルトの表示モードはhoverですが、修飾子.alwaysを設定することで常に表示するように変更できます。
• v-height-adaptiveディレクティブはposition: sticky属性に依存せず、単独で使用できます。

プロジェクトのセットアップ

yarn install
# Compiles and hot-reloads for development
yarn serve
# Compiles and minifies for production
yarn build
# Compiles and minifies for production with demo
yarn build:demo
# Lints and fixes files
yarn lint

構成のカスタマイズについては、「構成リファレンス」を参照してください。