Vueはプルダウンを実装してさらに読み込む

npm インストール --save el-table-infinite-scroll

// メイン.js
 
'el-table-infinite-scroll' から elTableInfiniteScroll をインポートします。
 
Vue.use(elTableInfiniteScroll);

<スクリプト>
// インポート import elTableInfiniteScroll from 'el-table-infinite-scroll';
エクスポートデフォルト{
  // ディレクティブを登録: {
    'el-table-infinite-scroll': elTableInfiniteScroll
  }
}
</スクリプト>

<el-table :height="テーブルの高さ" v-el-table-infinite-scroll="さらに読み込む">
 
</el-table>

<テンプレート>
    <div class="アプリコンテナ">
        <el-table :height="テーブルの高さ" v-el-table-infinite-scroll="さらに読み込む" :data="テーブルリスト">
            <!-- 表のデータは省略-->
        </el-table>
    </div>
</テンプレート>
 
<スクリプト>
// プラグインをインポートします。 import elTableInfiniteScroll from "el-table-infinite-scroll";
 
エクスポートデフォルト{
    名前: "インデックス",
    データ（） {
        戻る {
            // テーブルの高さ tableHeight:"",
            // データの総数 tableCount:0,
            // テーブルデータリスト tableList:[],
            // ロード中ですか? tableLoading: false,
            // テーブル検索条件 tableSearch:{
                ページ:1
            }
        }
    },
    // ディレクティブを登録: {
        "el-table-infinite-scroll": elTableInfiniteScroll、
    },
 
    作成された() {
        windowHeight を document.documentElement.clientHeight || document.body.clientHeight とします。
        // テーブルの高さを動的に計算します。200 は、テーブル以外の画面上の他の要素の高さです。実際の状況によって異なります。 this.tableHeight = windowHeight - 200 + "px";
    },
    マウントされた(){
        テーブルデータを取得します。
    },
 
    メソッド: {
        // テーブルデータをリクエストする getTableData(search) {
            page = search.page とします。
            url = "index?page=" + page;とします。
            // 初めてページを開くときは、データを一度読み込む必要があります。データが多すぎて自動的にスクロールがトリガーされないようにするには、読み込みを設定する必要があります。this.tableLoading = true;
            this.$http.get(url).then((結果) => {
                （res.code == 10000）の場合{
                    // データを連結します this.tableList = this.tableList.concat(result.data.list);
                    this.tableCount = 結果.count;
                    this.tableSearch.page = 結果.current;
                    this.tableLoading = false;
                }
            });
        },
        // さらに読み込む loadMore() {
            if (!this.tableLoading) {
                this.tableLoading = true;
                this.tableList.length < this.tableCount の場合 {
                    this.tableSearch.page++;
                    テーブルデータを取得します。
                } それ以外 {
                    this.$message("すべてのデータが読み込まれました!");
                    this.tableLoading = false;
                }
            }
        },
    }
};
</スクリプト>

<テンプレート>
    <div class="アプリコンテナ">
        <div :style="{height:tableHeight,overflow:'auto'}" id="tableBox">
            <!-- 表のデータは省略-->
        </div>
    </div>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
    名前: "インデックス",
    データ（） {
        戻る {
            // テーブルの高さ tableHeight:"",
            // データの合計数 tableCount:0,
            // テーブルデータリスト tableList:[],
            // ロード中ですか? tableLoading: false,
            // テーブル検索条件 tableSearch:{
                ページ:1
            }
        };
    },
    作成された(){
        windowHeight を document.documentElement.clientHeight || document.body.clientHeight とします。
        // テーブルの高さを動的に計算します。200 はテーブル以外の画面上の他の要素の高さです。実際の状況によって異なります。 this.tableHeight = windowHeight - 200 + 'px';
    },
    マウント() {
        テーブルデータを取得します。
        document.getElementById("tableBox").addEventListener('scroll',this.onTableScroll); 
    },
 
    破棄する前に() {
        // リスニングイベントを削除します window.removeEventListener('scroll', this.onTableScroll)
    },
 
    メソッド: {
        onTableScroll(){
            var obj = document.getElementById("テーブルボックス");
            var scrollHeight = obj.scrollHeight;
            var scrollTop = obj.scrollTop; 
            var objHeight = obj.offsetHeight;  
            // 100 はしきい値であり、実際の状況に応じて調整できます if(scrollHeight <= (scrollTop + objHeight + 100) && !this.tableLoading && this.tableList.length<this.tableCount){ 
                this.tableLoading = true;
                this.tableSearch.page++;
                タイムアウトを設定します(()=>{   
                    テーブルデータを取得します。
                },300)
            }
        },
 
        getTableData(検索){
            page = search.page とします。
            url = "index?page=" + page;とします。
            // 初めてページを開くときは、データを一度読み込む必要があります。データが多すぎて自動的にスクロールがトリガーされないようにするには、読み込みを設定する必要があります。this.tableLoading = true;
            this.$http.get(url).then((結果) => {
                （res.code == 10000）の場合{
                    // データを連結します this.tableList = this.tableList.concat(result.data.list);
                    this.tableCount = 結果.count;
                    this.tableSearch.page = 結果.current;
                    this.tableLoading = false;
                }
            });
        },
        
     
    },
};
</スクリプト>