elementui中的表格实现无限滚动

背景

找了很多资料，发现elementui中的表格需要实现无限滚动，需要下载一个插件，然后再结合elementui中的无限滚动的属性一起搭配使用，才能有实现完整的功能。在目前网上，我没有看到实现完整功能的博客文章。于是，我在结合他们的方法，自己写了一个完整的方法，分享给大家，希望对大家有帮助。完整的代码解决了每次都滚动两次以及解决了到底了还一直执行函数的问题

同样，我们需要安装插件

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

全局引用

import Vue from 'vue';
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>

以下是我结合elementui中无限滚动的infinite-scroll-disabled属性的完整代码

<el-table
	:data="loadItems"
	v-el-table-infinite-scroll="loadMoreData"
	infinite-scroll-disabled="disabled"
>
</el-table>
<script>
import elTableInfiniteScroll from "el-table-infinite-scroll";
export default {
  directives: {
    "el-table-infinite-scroll": elTableInfiniteScroll,
  },
  data() {
    return {
      i: 0,
	  dataItems:[{id:1},{id:2},{id:3},{id:4},{id:5},{id:6},{id:7},{id:8},{id:9},{id:10},{id:11}]
      loadItems: [],
      newArr: [],
      loading: false,
    };
  },
  created() {
	// 将数组切割成每份5个元素
    var arrLen = 5;
    for (var i = 0; i < this.dataItems.length; i += arrLen) {
      this.newArr.push(this.dataItems.slice(i, i + arrLen));
    }
  },
  methods: {
    loadMoreData() {
      if (!this.noMore) {
        this.loading = true;
        setTimeout(() => {
          this.loadItems = this.loadItems.concat(this.newArr[this.i]);
          this.loading = false;
          this.i++;
          if (this.i >= this.dataItems.length / 5) {
            this.$message.error("已经到底了");
          }
        }, 1000);
      }
    },
  }
  computed: {
    noMore() {
      return this.i >= this.dataItems.length / 5;
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
</script>

以上代码解决了每次都加载两次以及解决了加裁到底了还一直执行函数的问题。上面是数据写死的，如果需要调用接口的话，代码是需要改动的，这个时候就要发挥你们聪明的小脑袋了。（因为接口不方便透露，就把数据写死了。）方法是死的，人是活的，大家可以根据自己的情况更改代码，以实现功能。如果上面代码有什么问题，可以及时评论或者私聊我，方便我及时更正，谢谢大家配合~

可能会遇到的情况

• 当表格的高度不足以产生滚动条的时候，就会自动执行一次loadMoreData()方法，为了撑高数据产生滚动条
• 自动执行两次代码，添加计时器好像能够解决问题

（还有可能遇到的问题，后续会更新…）