vue实现表格滚动加载功能

我正在参与掘金创作者训练营第6期，[点击了解活动详情]

配合element-ui，实现el-table表格无限滚动加载的功能（与自带的 infinite-scroll 结合）

注意：请尽量设置 el-table 的高度，可以设置为 auto/100%（自适应高度），未设置会取 400px 的默认值（不然会导致一直加载）

安装

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

全局引入

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

局部引入

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

完整实例

<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';
    const exampleData = new Array(10).fill({
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    });

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

<style scoped>
    .el-table {
      width: 100%;
    }
</style>