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

本文介绍: 如何 vue 使用 ant design Vue中的select 组件实现下拉分页加载数据，并解决存在的一个问题。

可以借助 onPopupScroll 事件来监听下拉菜单的滚动事件，并判断当前是否已经到达了下拉菜单底部。具体可以通过以下步骤实现：

 &lt;a-select
                v-model="Form.governmentDirectors"
                @popupScroll="handlePopupScroll"
              &gt;
                &lt;a-select-option
                  v-for="i in queryPageData"
                  :value="i.id"
                  :key="i.id"
                  &gt;{{ i.fullName }}</a-select-option
                &gt;
              </a-select&gt;

2、在事件处理函数中，获取当前 dom 节点下滑的距离和滚动的位置。

handlePopupScroll(e) {
  const { target } = e;
  const { scrollTop, scrollHeight, clientHeight } = target;

  if (scrollTop + clientHeight == scrollHeight) {
    // 已经到达底部，触发分页逻辑
    // todo 这里就可以触发加载下一页请求  具体函数根据当前业务需求来定
    handlePagination();
  }
}

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

querypageFn() {
      const params = {
        page: this.querypage.page,
        size: this.querypage.size
      }
      queryListPage(params).then((res) => {
        if (res.data.code === 0) {
          if (res.data.data.length === 0) {
            return
          } else {
            this.queryPageData = this.queryPageData.concat(res.data.data)
          }
        }
      })
    },

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

if (scrollTop + 2 + offsetHeight >= scrollHeight)

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

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

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

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

发表回复取消回复

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

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

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

相关文章

发表回复 取消回复

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

发表回复取消回复