vue3使用ant-design的select实现下拉框滚动分页加载

前言

今天在写表单数据的时候，后端提到接口数据量大，需要以分页形式发送数据，一开始有点懵，看了下ant-design的官方文档，发现了popupScroll这个方法试着写了一下，目前使用没有什么大问题。记录一下，前端小白，有问题欢迎大神指出。

show-search 和    optionFilterProp="label" 配合使用可以实现模糊搜索

mode="multiple" 设置下拉多选

allow-clear 清空下拉框

             
                
                  {{ item.deviceName }}
                
              

 主要的逻辑就这些了。

  let page = 1;
  let total;
  const ManagementList = ref([]);
  const getManagementList = () => {
// getDeviceList这是调的后端的接口，里面的pageNO也是后端定的参数，换成自己的参数，就是页数，
//因为后端设置的size默认是10，我没做更改，可根据自己的需求添加
    getDeviceList({ pageNo: page }).then((res) => {
      console.log(res);
//records是后端返回给我的数据，可换成自己收到的字段
      ManagementList.value = ManagementList.value.concat(res.records);
//total就是总数了
      total = res.total;
    });
  };

  const handlePopupScroll = (e) => {
    const { scrollHeight, scrollTop, clientHeight } = e.target;
//这里就是通过滚动条判断是否触底，如果触底了就让页码page加1并判断是否小于总数，执行函数
    if (scrollHeight - scrollTop === clientHeight) {
      console.log('触底了', page);
      page = page + 1;
      if (page <= total) {
        getManagementList();
      }
    }
  };
  onMounted(() => {
    getManagementList();
  });