Vue implements pull-down to load more

npm install --save el-table-infinite-scroll

// main.js
 
import elTableInfiniteScroll from 'el-table-infinite-scroll';
 
Vue.use(elTableInfiniteScroll);

<script>
// Import import elTableInfiniteScroll from 'el-table-infinite-scroll';
export default {
  // Register directives: {
    'el-table-infinite-scroll': elTableInfiniteScroll
  }
}
</script>

<el-table :height="tableHeight" v-el-table-infinite-scroll="loadMore">
 
</el-table>

<template>
    <div class="app-container">
        <el-table :height="tableHeight" v-el-table-infinite-scroll="loadMore" :data="tableList">
            <!-- Table data omitted-->
        </el-table>
    </div>
</template>
 
<script>
// Import the plugin import elTableInfiniteScroll from "el-table-infinite-scroll";
 
export default {
    name: "index",
    data() {
        return {
            // Table height tableHeight:"",
            // Total number of data tableCount:0,
            // Table data list tableList:[],
            // Is it loading? tableLoading: false,
            // Table search conditions tableSearch:{
                page:1
            }
        }
    },
    // Register directives: {
        "el-table-infinite-scroll": elTableInfiniteScroll,
    },
 
    created() {
        let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        // Dynamically calculate the height of the table. 200 is the height of other elements on the screen except the table. It depends on the actual situation this.tableHeight = windowHeight - 200 + "px";
    },
    mounted(){
        this.getTableData(this.tableSearch);
    },
 
    methods: {
        // Request table data getTableData(search) {
            let page = search.page;
            let url = "index?page=" + page;
            // The first time you open the page, you need to load the data once. To prevent too much data from automatically triggering scrolling, you need to set it to loading this.tableLoading = true;
            this.$http.get(url).then((result) => {
                if (res.code == 10000) {
                    // Concatenate data this.tableList = this.tableList.concat(result.data.list);
                    this.tableCount = result.count;
                    this.tableSearch.page = result.current;
                    this.tableLoading = false;
                }
            });
        },
        // Load more loadMore() {
            if (!this.tableLoading) {
                this.tableLoading = true;
                if (this.tableList.length < this.tableCount) {
                    this.tableSearch.page++;
                    this.getTableData(this.tableSearch);
                } else {
                    this.$message("All data has been loaded!");
                    this.tableLoading = false;
                }
            }
        },
    }
};
</script>

<template>
    <div class="app-container">
        <div :style="{height:tableHeight,overflow:'auto'}" id="tableBox">
            <!-- Table data omitted-->
        </div>
    </div>
</template>
 
<script>
export default {
    name: "index",
    data() {
        return {
            // Table height tableHeight:"",
            // Total number of data tableCount:0,
            // Table data list tableList:[],
            // Is it loading? tableLoading: false,
            // Table search conditions tableSearch:{
                page:1
            }
        };
    },
    created(){
        let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        // Dynamically calculate the height of the table. 200 is the height of other elements on the screen except the table. It depends on the actual situation. this.tableHeight = windowHeight - 200 + 'px';
    },
    mounted() {
        this.getTableData(this.tableSearch);
        document.getElementById("tableBox").addEventListener('scroll',this.onTableScroll); 
    },
 
    beforeDestroy() {
        // Remove the listening event window.removeEventListener('scroll', this.onTableScroll)
    },
 
    methods: {
        onTableScroll(){
            var obj = document.getElementById("tableBox");
            var scrollHeight = obj.scrollHeight;
            var scrollTop = obj.scrollTop; 
            var objHeight = obj.offsetHeight;  
            // 100 is the threshold value, which can be adjusted according to the actual situation if(scrollHeight <= (scrollTop + objHeight + 100) && !this.tableLoading && this.tableList.length<this.tableCount){ 
                this.tableLoading = true;
                this.tableSearch.page++;
                setTimeout(()=>{   
                    this.getTableData(this.tableSearch);
                },300)
            }
        },
 
        getTableData(search){
            let page = search.page;
            let url = "index?page=" + page;
            // The first time you open the page, you need to load the data once. To prevent too much data from automatically triggering scrolling, you need to set it to loading this.tableLoading = true;
            this.$http.get(url).then((result) => {
                if (res.code == 10000) {
                    // Concatenate data this.tableList = this.tableList.concat(result.data.list);
                    this.tableCount = result.count;
                    this.tableSearch.page = result.current;
                    this.tableLoading = false;
                }
            });
        },
        
     
    },
};
</script>