ant design vue table实现滚动加载

刘山苏

已于 2022-06-16 09:53:31 修改

阅读量3.5k

点赞数 4

文章标签： vue.js javascript

于 2022-06-15 11:09:19 首次发布

本文链接：https://blog.csdn.net/m0_62018151/article/details/125293147

版权

本文介绍了一个Vue自定义指令`loadMore`，用于实现表格数据的上拉和下拉加载。该指令监听滚动事件，当满足特定条件（如接近底部）时触发加载更多数据的回调函数。在实际应用中，只需在组件上使用`v-loadmore`并传递处理函数，即可结合AJAX请求无缝加载数据。

摘要由CSDN通过智能技术生成

在项目directive 下创建 loadMore.js

写入代码

/**
 * 加载更多数据的指令
 */
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);
					}
				}
			}
		});
	}
};

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

调用

<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"
>