element-ui中实现瀑布流加载

<template>
    <div id="show_key_word">
        <el-table
        :data="key_words"
        v-loading="loading"
        element-loading-text="弹药填充中..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        style="width: 100%">
            <el-table-column
                fixed
                label="关键词"
                width="180">
                <template slot-scope="scope">
                    <a :href=scope.row.url target="blank">{{ scope.row.key_word }}</a>
                </template>
            </el-table-column>
            <el-table-column
                prop="title"
                label="标题"
                width="480">
            </el-table-column>
            <el-table-column
                prop="link"
                label="链接"
                width="200">
            </el-table-column>
            <el-table-column
                prop="max_page"
                label="最大页数"
                width="120">
            </el-table-column>
            <el-table-column
                prop="sleep_time"
                label="休眠时间"
                width="120">
            </el-table-column>
            <el-table-column
                prop="city_id"
                label="城市id"
                width="120">
            </el-table-column>
            <el-table-column
                prop="site_name"
                label="站点名称"
                width="120"
            >
            </el-table-column>
            <el-table-column
                prop="ranking"
                label="站点排名"
                width="120"
            >
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    methods: {
    
        loadData() {
            window.onscroll = async () => {
                let isLoading = false
                let bottomOfWindow = this.getScrollTop() + this.getWindowHeight() === this.getScrollHeight()
                const scrollheight = this.getScrollTop()
                if(bottomOfWindow && !isLoading) {
                    isLoading = true
                    this.loading = true
                    isLoading = await this.loadingData()
                    // 加载完数据之后将滚动条回滚到没加载的时候的位置
                    window.scrollTo(100,scrollheight)
                }
            }
        },
        
        loadingData(){
            return new Promise(resolve => {
                const start = this.key_words.length
                let self = this
                axios.get('/api/get_key_word',{
                    params:{
                        start:start,
                        end:start+100
                    }
                })
                .then(response => {
                    if (response.data) {
                        for(let i of response.data) {
                            i.url = `charts/?key_word=${i.key_word}`
                            self.key_words.push(i)
                        }
                    }
                    self.loading = false
                    resolve(false)
                })
                .catch(err => {
                    console.log(err)
                })
                console.log("数据加载完成！")
            })
        },

        getScrollTop(){
        　　let scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
        　　if(document.body){
        　　　　bodyScrollTop = document.body.scrollTop;
        　　}
        　　if(document.documentElement){
        　　　　documentScrollTop = document.documentElement.scrollTop;
        　　}
        　　scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
        　　return scrollTop;
        },

        getScrollHeight(){
            let scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
        　　if(document.body){
        　　　　bodyScrollHeight = document.body.scrollHeight;
        　　}
        　　if(document.documentElement){
        　　　　documentScrollHeight = document.documentElement.scrollHeight;
        　　}
        　　scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
        　　return scrollHeight;
        },

        getWindowHeight(){
            let windowHeight = 0;
        　　if(document.compatMode == "CSS1Compat"){
        　　　　windowHeight = document.documentElement.clientHeight;
        　　}else{
        　　　　windowHeight = document.body.clientHeight;
        　　}
        　　return windowHeight;
        }
    },
    mounted() {
        this.loadData()
    },
    data() {
        return {
            key_words: [],
            loading:false
        }
    }
}
</script>

<style scoped>
#show_key_word {
    margin-left: 10%;
    margin-right: 10%
}
</style>