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);
相关推荐
June_liu4 分钟前
列太多vxe-table自动启用横向虚拟滚动引起的bug
前端·javascript
齐杰拉12 分钟前
useSse 开源:如何把流式数据请求/处理简化到极致
前端·chatgpt
起风了啰12 分钟前
Android & IOS兼容性问题
前端
养生达人_zzzz13 分钟前
飞书三方登录功能实现与行业思考
前端·javascript·架构
GarrettGao15 分钟前
Frida常见用法
javascript·python·逆向
布列瑟农的星空24 分钟前
从webpack到vite——配置与特性全面对比
前端
程序员鱼皮27 分钟前
我代表编程导航,向大家道歉!
前端·后端·程序员
车前端30 分钟前
极致灵活:如何用一个输入框,满足后台千变万化的需求
前端
用户114818678948430 分钟前
Rollup构建JavaScript核验库,并发布到NPM
前端
肥晨33 分钟前
前端私有化变量还只会加前缀嘛?保姆级教程教你4种私有化变量方法
前端·javascript