目录

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

目录

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()
    }
}