Vue3 + ts+ elementUi 实现后台数据渲染到下拉框选项中，滑动加载更多数据效果

前言

功能需求：下拉框中分页加载后端接口返回的人员数据，实现滑动加载更多数据效果，并且可以手动搜索定位数据，此项目使用Vue3 + ts+ elementUi 实现

实现

把此分页滑动加载数据功能封装成vue中的hooks，文件命名为useMoreUser.ts

import {
   
   ref,reactive,nextTick} from 'vue'

export  const useMoreUser = () => {
   
   
  const selectMoreData = reactive({
   
   
    page: 0, //当前页
    loading: false, //loading
    hasMore: true, //判断是否还有更多数据
    selectValue: '', //下拉框选中数据
    selectOptions: [] //下拉框选项
  })
  // 人员列表加载数据列表【newPage: 页数，name: 搜索条件】
  const loadDataList = async (newPage: number, name?: string = '' ) => {
   
   
    try {
   
   
      selectMoreData.loading = true;
      //后端接口,入参为搜索条件人员姓名，页数
      let res = await getUserList(name, newPage); 
      if (newPage === 1) {
   
    //初始化
        selectMoreData.selectOptions = [];
      }
      //存储后端接口返回数据
      selectMoreData.selectOptions.push(...res.rows);
      //判断是否还有更多数据
      selectMoreData.hasMore = selectMoreData.selectOptions.length < res.total;
      selectMoreData.page = newPage;
    } catch (err) {
   
   
      console.error(err);
    } finally {
   
   
      selectMoreData.loading = false;
    }
  };

  //加载更多数据
  const handleLoadMore = async (newPage: number,  name?: string = '' ) => {