如何vue使用ant design Vue中的select组件实现下拉分页加载数据，并解决存

    需求：拉下菜单中数据过多，200条以上，就会导致select组件卡死。以是需要使用滑动到底部使其分页加载

    可以借助 onPopupScroll 变乱来监听下拉菜单的滚动变乱，并判定当前是否已经到达了下拉菜单底部。详细可以通过以下步调实现：


    1、在组件中绑定 @popupScroll回调变乱

1. <a-select
2.                 v-model="Form.governmentDirectors"
3.                 @popupScroll="handlePopupScroll"
4.               >
5.                 <a-select-option
6.                   v-for="i in queryPageData"
7.                   :value="i.id"
8.                   :key="i.id"
9.                   >{{ i.fullName }}</a-select-option
10.                 >
11.               </a-select>

复制代码

    2、在变乱处置惩罚函数中，获取当前dom节点下滑的距离和滚动的位置。

1. handlePopupScroll(e) {
2.   const { target } = e;
3.   const { scrollTop, scrollHeight, clientHeight } = target;
5.   if (scrollTop + clientHeight == scrollHeight) {
6.     // 已经到达底部，触发分页逻辑
7.     // todo 这里就可以触发加载下一页请求  具体函数根据当前业务需求来定
8.     handlePagination();
9.   }
10. }

复制代码

    分页逻辑例子：主要是页码++，数据追加（concat）

1. querypageFn() {
2.       const params = {
3.         page: this.querypage.page,
4.         size: this.querypage.size
5.       }
6.       queryListPage(params).then((res) => {
7.         if (res.data.code === 0) {
8.           if (res.data.data.length === 0) {
9.             return
10.           } else {
11.             this.queryPageData = this.queryPageData.concat(res.data.data)
12.           }
13.         }
14.       })
15.     },

复制代码

    以上根本实现了使用a-select下拉框组件实现下拉分页加载数据，下面我们来说一下我碰到的坑。

当浏览器巨细缩放为正常100%是没有问题的，可以正常下拉
而且打印了scrollTop, scrollHeight, clientHeight三个属性的关系


    但是当浏览器缩放巨细调解不是100%后 我们下拉框滑到底部，是不会继续请求的，这时控制台也没有报错，接口返回也没有什么问题。

1. console.log(scrollHeight, scrollTop, clientHeight, 'llslsl')

复制代码

以下为打印的内容 分辨率为125%的时间，我们会发现 scrollTop发现弊端，导致条件等式不建立


    到如今我就彻底慌了，难道scrollTop属性和浏览器分辨率有关。查阅资料后还真的是。

   可以如许表明：当分辨率发生变化时，页面的布局和尺寸也会发生相应的变化，导致元素的位置和巨细产生了变化。而 e.target 是指触发变乱的元素，在这个元素尺寸和位置发生变化之后，它的 scrollTop 属性天然也会受到影响。
  详细地说，当元素的高度变大或缩小时，它的内容区域的总高度也会发生相应的变化，进而影响到 scrollTop 属性的值。比方，当元素高度变大时，它的内容就需要滚动更多的距离才华到达顶部，因此 scrollTop 属性的值也会相应地增大；而当元素高度变小时，则需要滚动更少的距离才华到达顶部，因此 scrollTop 属性的值也会相应地减小。
  以上是分辨率变化对 e.target 的 scrollTop 属性的影响的一个粗略表明。需要留意的是，详细的影响还取决于其他因素，如CSS样式、页面布局等因素的变化。如果详细情况下需要深入相识 e.target 的 scrollTop 属性是如何受到影响的，可以通过调试工具等本领举行进一步的排查和分析。
  
    说一下解决方案吧，我发现无论怎么变大变小  scrollTop 的弊端都会在2以内。以是我们需要改一下if判定内里的判定方式。

1. if (scrollTop + 2 + offsetHeight >= scrollHeight) 

复制代码

    以上我们手动给他把这个弊端加上2，而且把等式换为大于即是，我们就能完善解决此bug，我一开始以为是歪点子，如今总结之后发现这是一个合适解决方案哦！


来源：https://blog.csdn.net/weixin_44948981/article/details/130259646
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！