ant design vue table实现滚动加载

1. 在项目directive 下创建 loadMore.js
2. 写入代码

   /**
    * 加载更多数据的指令
    */
   export default {
   	install(Vue) {
   		Vue.mixin({
   			directives: {
   				loadmore: {
   					bind(el, binding) {
   						let bindTime;
   						clearTimeout(bindTime)
   						bindTime = window.setTimeout(function () {
   							let selectWrap = el.querySelector(".ant-table-body");
   							if (!selectWrap) selectWrap = el.querySelector(".el-table__body-wrapper");
   							var lastScrollTop = 0;
   							selectWrap.addEventListener("scroll", function () {
   								let offsetValue = 20;
   									if(this.scrollTop == 0) {
   										binding.value('up', this);
   										return false;
   									}
   									if (lastScrollTop != this.scrollTop) {
   										lastScrollTop = this.scrollTop;
   										const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight;
   										if (scrollDistance <= offsetValue) {
   											binding.value('down', this);
   										}
   									}
   							}, false);
   						}, 200);
   					}
   				}
   			}
   		});
   	}
   };

3. 注册

   //加载更多数据的指令
   import loadMore from '@/directive/loadMore'
   Vue.use(loadMore)

4. 调用

   <a-table
       :class="position ==='down' ? 'load-down' : 'load-up'"
       :rowKey="(record,index)=>{return index}"
       :columns="tableData.columns"
       :data-source="tableData.data"
       :pagination="false"
       :scroll="{ y: tabHeight }"
       :key="tabHeight"
       :loading="tableData.loading"
       :isLoad="tableData.isLoad"
       v-loadmore="loadMore"
       @scrollCapture="scrollCapture"
   >

5. 然后在 loadMore 方法中写入ajax 请求即可