基于Ant Design Vue的下拉分页

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

<a-select v-model="receipientId" placeholder="全部" allowClear @popupScroll="handlePopupScroll">
    <a-select-option v-for="item in supplyBatch" :key="item.id">
        {{ item.nickname }}
    </a-select-option>
</a-select>

<script>
import moment from 'moment'
import { PageHeaderWrapper } from '@ant-design-vue/pro-layout'
import { getPartnerList } from '@/api/base'
export default {
  name: 'SettleDistributorIndex',
  components: {
    PageHeaderWrapper
  },
  data () {
    return {
      supplyBatch: [],
      selectPage: 1,
      selectSize: 10,
      selectTotal: 1,
    }
  },
  mounted () {
    this.getTaskList()
  },
  methods: {
    /** 滚动事件 */
    handlePopupScroll(e) {
        const { scrollHeight, scrollTop, clientHeight } = e.target
        if (scrollHeight - scrollTop === clientHeight) {
          console.log('触底了')
          this.selectPage = this.selectPage + 1
          if(this.selectPage <= this.selectTotal){
            this.getTaskList()
          }
        }
    },
    getTaskList () {
      getPartnerList({
        page: this.selectPage,
        query: {},
        size: this.selectSize
      }).then(res => {
        if (res.code == 0) {
          this.supplyBatch = this.supplyBatch.concat((res.data && res.data.records) || [])
          this.selectTotal = res.data.pages
        }
      }).catch(err => {
    
      })
    },
  }
}
</script>