なまけローリングVUE elementUI表形式データ

私たちは、プロジェクト内のパフォーマンスの問題が発生しています

VUE + elementUIテーブル表が示すデータ、時間とき大量のデータではなく、ショーの終了、データの要求が大きすぎる一方で、経験に影響を与える、ページのレンダリング時間が長くなり、
この時間は、多くの場合に対処するための2つの方法があり、

1、タブ、次のように

2、私はページにしたい、そしてそれをすべて1ページのデータを表示したくない場合は？実際には、この時間は遅延ロードされたデータとすることができます

以下の表に示すデータの先頭行のみ31であります

スクロールバーがローに引かれると、データの残りの部分は、負荷の後、残りの31未満であれば、それはその後、データ31をロードします

私は2番目の方法でを選んだので、すべてのデータを見ることができる必要とするプロジェクトの要件によると、

それを達成するためにどのように第二の方法は、そう？

あなたは3つの属性を区別する必要がある前に、それがどのように動作するかを理解する：
scrollHeightを：スクロールバーの内容が含まれている要素の全体の高さを指します。読み取り専用属性を。PXユニットなし。画面は見ることができないので、次の図、高さ54件のデータが、あるため、スクロールバーのあるような高い
scrollTopスプライト：要素のスクロールバーは、スクロールダウン距離の内容をスクロールアップする場合。読み取りおよび書き込み。PXユニットなし。scrollTopスプライトをバースクロールしない要素が0の場合、値が唯一の正することができます。赤色は、下部フレームの高さ
clientHeight：要素のクライアント領域のサイズ、要素は、空間の大きさを指し、実際には、それらの境界の内容によって表示領域の大きさを占めていました。これは、下図の赤い矢印の高さであります

それの一番下にその圧延スクロールバーを確認する方法？

あなたは、時間の一番下にあるスクロールバーをロールバックすることができたときにscrollHeight-scrollTopスプライト-clientHeight = 0、これはあります。

初めて要求されたデータ、最初のセットの要求の数を記録する変数（実際には、バックグラウンド処理のページングを行うことです）

この .currentPage = 1。 、
$ これは = これを、
 この。。axios.fun $（）、その後（RES => { 
     $ この .totalPage = res.totalPage; //は、ここで総ページ数を知る必要があり
     
     $ この .tableData = RESを。データ; // テーブルデータ 
}）

スクロールイベントリスナーテーブルDOMオブジェクト

DOM =せdocument.querySelector（targetDom）; 
    dom.addEventListener（ "スクロール"、関数（）{ 
        CONST scrollDistance = dom.scrollHeight - dom.scrollTop - dom.clientHeight;
         IF（scrollDistance <= 0）{ // 0証明に等しいです。既に最後に、インタフェース要求することができる
            IF（$ この .currentPage <$ この .totalPageは）{ // シートの合計数よりも少ない現在のページ番号は、要求された 
                $をこの .currentPage ++; // 現在のページ番号をインクリメント
                
                // インターフェース要求コード 
                $ これを。$ axios.fun（）。次に、（RES => { 
                
                    $ この= $ .tableData この .tableData.concat（res.data）// 要求データバックと現在表示と組み合わせます
                ）} 
                
            } 
        } 
    }）

まあ、遅延ロードデータテーブル]ドロップダウンスクロールは、必要のヘルプ学生への欲求を達成しています。

ボーエン引用リンク：https://segmentfault.com/a/1190000018756141?utm_source=tag-newest

なまけローリングVUE elementUI表形式データ

おすすめ