ElementUI table组件无限滚动加载

2021/10/18
- 编程
0阅读

elementUI自带的InfiniteScroll在Table组件中直接使用会触发无限load。似乎是监听了当前页面DOM的滚动来执行的load。

经过一番搜索发现，有个名叫el-table-infinite-scroll的插件可以在table上实现无限滚动效果

安装命令

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

局部引用：

<template>
    <el-table
            height="400px"
            v-el-table-infinite-scroll="load"
            :data="tableData"
    >
        <el-table-column prop="date" label="日期" width="180"> </el-table-column>
        <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
</template>


<script>
    import elTableInfiniteScroll from 'el-table-infinite-scroll';
    export default {
        directives: {
            'el-table-infinite-scroll': elTableInfiniteScroll
        },
        methods: {
            load() {
                this.$message.success('加载下一页');
                this.tableData = this.tableData.concat(exampleData);
            }
        }
    }
</script>