vue使用ant design Vue中的a-select组件实现下拉分页加载数据

<a-form-model-item

          :labelCol="labelCol"

          :wrapperCol="wrapperCol"

          prop="equipmentTypeId"

          label="所属设备种类">

          <a-select v-model="model.equipmentTypeId" @popupScroll="handlePopupScroll" placeholder="请选择所属设备种类 " mode="multiple">

            <a-select-option v-for="(item, index) in typeList" :value="item.id" :key="item.id">

              {{ item.equipmentTypeName }}

            </a-select-option>

          </a-select>

        </a-form-model-item>

import { getDeviceTypeList } from '@/api/home'

export default {

   data () {

        typeList: [],

        pageObj: {

          pageNo: 1,

          pageSize: 10,

          pages: 0, // 总页数

          total: 0, // 总条数

        }

   }

}

methods: {

      // 下拉列表滚动时的回调

      handlePopupScroll (e) {

        console.log(e)

        if (this.pageObj.pageNo >= this.pageObj.pages) return;

        const { target } = e;

        const { scrollTop, scrollHeight, clientHeight } = target;

        if (scrollTop + 2 + clientHeight >= scrollHeight) {

          // 已经到达底部，触发分页逻辑

          // todo 这里就可以触发加载下一页请求  具体函数根据当前业务需求来定

          this.pageObj.pageNo = ++this.pageObj.pageNo;

          this.pageObj.pageSize+1

          this.getTypeList(true)

        }

      },

      getTypeList(isScroll = false) {

        let param = {

          pageNo: this.pageObj.pageNo,

          pageSize: this.pageObj.pageSize

        }

        getDeviceTypeList(param).then((res) => {

          if (res.success) {

            this.pageObj.pages = res.result.pages;

            this.typeList = isScroll == false ? [] : this.typeList;

            res.result.records.forEach((e) => {

              // 成功之后的数据应该push进数组中，而不是直接等于，否则就是下拉换页的效果了。

              this.typeList.push(e);

            });

          }

        })

      },

}