elementUi——table中实现滚动到底部无限加载数据功能——功能实现

最近在看同事代码时，发现同事使用了一个表格自动滚动加载数据的功能。

这个功能适用于：表格中内容过多，需要分页展示，但是又不想使用分页组件，此时可以只展示一页的数据，然后当表格滚动到底部时，再加载下一页的数据。

参看大神链接：element-ui 的 el-table 上使用无限滚动加载（与自带的 infinite-scroll 结合）：https://blog.csdn.net/baidu_27769027/article/details/101924676

elementUi官网上是有无限滚动加载功能的。

infiniteScroll无限滚动功能实现

在要实现滚动加载的列表上上添加v-infinite-scroll，并赋值相应的加载方法，可实现滚动到底部时自动执行加载方法。

官网实例代码如下：

<template>
  <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
    <li v-for="i in count" class="infinite-list-item">{{ i }}</li>
  </ul>
</template>

<script>
  export default {
    data () {
      return {
        count: 0
      }
    },
    methods: {
      load () {
        this.count += 2
      }
    }
  }
</script>

针对表格数据的无限滚动功能实现

表格数据无限滚动加载功能实现效果预览地址：https://yujinpan.github.io/el-table-infinite-scroll/

1.安装插件el-table-infinite-scroll

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

2.全局注册方法：在main.js文件中引入并全局注册

import Vue from 'vue';
import elTableInfiniteScroll from 'el-table-infinite-scroll';

Vue.use(elTableInfiniteScroll);

3.局部注册方法：

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

4.页面使用无限滚动插件

<template>
  <el-table
    border
    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>

完成！！！

此篇文章只做记录，具体步骤完全参考大神的链接，希望遇到此需求的时候，能够帮助实现功能。