VUE下拉选择分页,远程搜索

实现效果

实现思路

  1. 初始化加载第一页;
  2. 监听下拉框的滚动事件,当滚动到底部的时候加载下一页;
  3. 输入搜索时,重置为第一页加载;
  4. 关闭下拉选择框时,判断如果存在搜索值,要清空搜索值、并加载第一页。

实现代码

html

html 复制代码
<a-select
    v-model:value="values"
    :mode="multiple"
    :show-search="true"
    :filter-option="false"
    :default-active-first-option="false"
    @popupScroll="onPopupScroll"
    @search="onSearch"
    @dropdownVisibleChange="onDropdownVisibleChange"
>
    <a-select-option v-for="item in optionList" :key="`${item.value}-${refreshFlag}`" :value="item.value">
        <div :title="item.label">{{ item.label }}</div>
    </a-select-option>
    <a-select-option v-if="loading" disabled value="loading">
        <a-spin :spinning="true"></a-spin>
    </a-select-option>
</a-select>

ts

typescript 复制代码
const optionList = ref<{ label: string; value: string }[]>([]);
const loading = ref<boolean>(false);
const keyWord = ref<string>('');
const curPage = ref<number>(0);
const total = ref<number>(0);
const refreshFlag = ref<number>(1);

// 最终搜索接口
const onRelationSearch = debounce(async (page = 1, curlist = []) => {
    try {
         const params: any = {
             condition: {
             	keyWord: keyWord.value,
             },
             paging: {
                 pageIndex: page,
                 pageSize: 20,
             },
         };
         const res = await oneFunction(params);
         const dataList = res?.result || [];
         optionList.value = [
             ...curlist,
             ...dataList
                 .map((item: any) => {
                     return {
                         label: item.name,
                         value: item.id,
                     };
                 });
         ];
         refreshFlag.value++;
         curPage.value = page;
         total.value = res?.result?.pageResult?.totalCount || 0;
    } finally {
        loading.value = false;
    }
}, 300);

// 搜索前置判断
const getListBefore = (page: number, list: { label: string; value: string }[]) => {
    // _props传入 分页, 现有列表,输入框内容
    // 当不是第一页切 列表数量大于等于总数时终止掉
    if (page !== 1 && list.length >= total.value) {
        message.warning('没有更多数据了');
    } else if (loading.value) {
        // 如果处于加载中也终止掉
        return;
    }
    // 请求,加载中
    loading.value = true;
    // 请求接口
    onRelationSearch(page, list);
};

// 滚动事件
const onPopupScroll = (event: any) => {
    const { target } = event;
    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
        // 调用加载数据,传入需求请求的分页
        getListBefore(curPage.value + 1, optionList.value);
    }
};

// 搜索事件
const onSearch = (value: any) => {
    loading.value = false;
    optionList.value = [];
    keyWord.value = value;
    getListBefore(1, []);
};

const onDropdownVisibleChange = debounce((open: boolean) => {
    if (!open && keyWord.value) {
        loading.value = false;
        keyWord.value = '';
        optionList.value = [];
        getListBefore(1, []);
    }
}, 300);
相关推荐
陈不知代码21 分钟前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记22 分钟前
sass中@mixin与 @include
前端·sass
陈琦鹏29 分钟前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数1 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante1 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam2 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8502 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
誰能久伴不乏2 小时前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端
涔溪3 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
今禾3 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite