修改AntDesignVue的Select选择器为懒加载

小小封收录于朝夕不倦

2022-08-08 约 200 字预计阅读 1 分钟

https://image.hikoutei.cn/blog/0Q8q2F.jpg!md

警告

本文最后更新于 2022-08-08，文中内容可能已过时。

AntDesignVue 自带是没有懒加载功能的，但是支持popupScroll事件，可以通过此事件来处理下拉分页的懒加载功能。

1
2
3
4
5
6
7
8
9


<a-select v-model="bindingPolicyForm.subject" @popupScroll="handleSubjectPopupScroll">

<a-select-option v-for="item in roleOption" :key="item.key">

{{ item.value }}

</a-select-option>

</a-select>

1
2
3
4
5
6
7
8
9


handleSubjectPopupScroll (e) {
  const { scrollHeight, scrollTop, clientHeight } = e.target
    if (scrollHeight - scrollTop - clientHeight === 0) { 
	  // 页数增加一页
      this.subjectPageParam.pageNo += 1
      // 根据新页数获取数据，并渲染
      this.getSubjectOption()
    }
}