基于Ant Design Vue的下拉分页

Ant Design Vue 文档（Select）

ant-design-vue (select组件) 内部并没有提供可支持下拉分页加载更多的功能，但提供了 popupScroll 事件，下拉列表滚动时的回调。我们可根据这个事件做下拉分页，具体代码如下：

<Select style="width: 200px" onPopupScroll={this.handlePopupScroll.bind(this)}>
  {
    [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14].map((item, index) => (
      <Select.Option key={index} >{item}</Select.Option>
    ))
  }
</Select>


/** 滚动事件 */
handlePopupScroll(e: any) {
    const { scrollHeight, scrollTop, clientHeight } = e.target
    if (scrollHeight - scrollTop === clientHeight) {
      console.log('触底了')
    }
}