基于element-UI 实现下拉框滚动翻页查询通用组件

初始化控件,定义传入参数

将远程查询的接口封装为函数,作为参数传入组件,可以适应多种场景

复制代码
<script lang="ts" setup>
import { nextTick, onMounted, ref, watch } from 'vue';
import { message } from "@/utils/message";

interface FetchParams {//远程搜索使用的参数
    [key: string]: any;
}

const props = defineProps({
    fetchData: {//传入进行查询的接口
        type: Function,
        required: true
    },
    modelValue: {//select 组件绑定的值
        type: [String, Number],
        default: ''
    },
    name: {//下拉框无对应选项的时候用于填充到选项里的值
        type: String,
        default: ''
    },
    placeholder: String,
    disabled: Boolean,
    param: {//查询接口调用的参数
        type: Object,
        default: () => ({})
    }
});

调用传入函数获取远程数据

对传入函数的基本调用以及一些异常处理,loading的值是el-select的配置项,这里需要注意的是在配置了loading = true时,刷新下拉框会内容时会明显看到选项闪烁一下,如果不希望展示搜索刷新的效果,就不要配置loading

复制代码
const getData = async (params: FetchParams, isLoadMore = false) => {
    if (!hasMore.value && isLoadMore) return;
    
    loading.value = true;
    try {
        const res = await props.fetchData(params);
        if (!res.error) {
            const newItems = res.items?.map(item => ({
                label: item.name,
                value: item.id
            })) || [];
            
            if (isLoadMore) {
                // 加载更多时,追加数据
                itemList.value = [...itemList.value, ...newItems];
            } else {
                // 首次加载或搜索时,替换数据
                itemList.value = newItems;
            }
            
            // 如果有 name 值,确保它在列表中
            if (props.name && value.value) {
                const existingItem = itemList.value.find(item => item.value === value.value);
                if (!existingItem) {
                    itemList.value = [{
                        label: props.name,
                        value: value.value
                    }, ...itemList.value];
                }
            }
            
            // 判断是否还有更多数据
            hasMore.value = newItems.length === params.MaxResultCount;
            totalItems.value = itemList.value.length;
        } else {
            // 如果接口返回错误,清空数据
            itemList.value = [];
            hasMore.value = false;
            totalItems.value = 0;
        }
    } catch (error) {
        // 如果发生错误,清空数据
        itemList.value = [];
        hasMore.value = false;
        totalItems.value = 0;
        message(error, { customClass: 'el', type: 'error' });
    } finally {
        loading.value = false;
    }
};

远程搜索方法

复制代码
// 远程搜索方法
const remoteSearch = debounce(async (query: string) => {
    currentPage.value = 1; // 重置页码
    hasMore.value = true; // 重置加载更多状态
    if (query) {
        const params: FetchParams = {
            ...props.param,
            skipCount: 1,
            MaxResultCount: 10,
            keyword: query
        };
        await getData(params);
    } else {
        // 如果搜索词为空,则加载初始数据
        const params: FetchParams = {
            ...props.param,
            skipCount: 1,
            MaxResultCount: 10
        };
        await getData(params);
    }
}, 300);

下拉滚动事件监听

这里就是最坑的地方了,因为el-select组件被封装过,所以@scroll.native不会有任何效果。为了实现下拉框的滚动加载功能,只能用@visible-change 来监听下拉框,并在下拉框状态变化的时候添加下拉滚动事件

复制代码
const handleVisibleChange = async (visible) => {
    if (visible) {
        // 先清空数据
        itemList.value = [];
        totalItems.value = 0;
        hasMore.value = true;
        currentPage.value = 1;
        
        // 加载初始数据
        const params: FetchParams = {
            ...props.param,
            skipCount: 1,
            MaxResultCount: 10
        };
        await getData(params);
        
        // 添加滚动事件监听
        const dropdown = document.querySelector('.myselect-loadmore .el-select-dropdown__wrap');
        if (dropdown) {
            dropdown.addEventListener('scroll', handleScroll);
            // 重置滚动位置
            dropdown.scrollTop = 0;
        }
    } else {
        // 移除滚动事件监听
        const dropdown = document.querySelector('.el-select-dropdown');
        if (dropdown) {
            dropdown.removeEventListener('scroll', handleScroll);
        }
    }
};

//防抖函数
function debounce<T extends (...args: any[]) => any>(func: T, delay: number) {
    let timeout: NodeJS.Timeout;
    return function (this: any, ...args: Parameters<T>) {
        const context = this;
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(context, args), delay);
    };
}

const handleScroll = debounce(async (event) => {
    // 判断是否滚动到底部
    const bottom = event.target.scrollHeight === event.target.scrollTop + event.target.clientHeight;
    if (bottom && !loading.value && hasMore.value) {
        currentPage.value++;
        // 调用父组件传递的函数,并传入子组件的参数
        const params: FetchParams = {
            ...props.param,
            skipCount: currentPage.value,
            MaxResultCount: 10
        };
        await getData(params, true);
    }
}, 100);

el-select 组件配置

popper-class的设置是为了让事件能够准确绑定到下拉框,不添加该属性可能导致事件被绑定到父组件上面

复制代码
<template>
    <el-select 
        v-model="value" 
        class="myselect" 
        :placeholder="placeholder || '请选择!'" 
        popper-class="myselect-loadmore"
        filterable 
        remote
        remote-show-suffix
        :remote-method="remoteSearch"
        clearable 
        :disabled="disabled" 
        @visible-change="handleVisibleChange"
        @update:modelValue="(val) => emit('update:modelValue', val)">
        <el-option v-for="(item, index) in itemList" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
</template>

父组件调用示例

复制代码
              <SelectCommon v-model="Id" :fetch-data="getList" :param="selectParams"
                placeholder="请选择" />

适用于Vue3+ts+element的场景,文件添加到项目可以直接调用。

相关推荐
狮子座的男孩11 分钟前
解决:给整个 Vue 项目添加鼠标点击、鼠标移动、鼠标滚轮(DOM)事件,以达到后台延迟退出
javascript·vue.js·经验分享·dom树·鼠标移动事件·鼠标点击事件·鼠标滚轮事件
小lan猫22 分钟前
【实战】 Vue 3、Anything LLM + DeepSeek本地化项目(五)
前端·vue.js
星使bling23 分钟前
基于Baidu JSAPI Three的卫星轨道三维可视化Demo
前端·javascript
Oder_C24 分钟前
自定义指令-优化v-if和v-show上的使用
前端·javascript·vue.js
网络点点滴1 小时前
设置与 Netlify 的持续集成
javascript
iaku1 小时前
🔥Pinia状态管理:现代Vue应用状态管理实战指南
前端·vue.js
yinke小琪1 小时前
40个JS常用使用技巧案例
前端·javascript
前端小旋风啊1 小时前
图片格式转化之 webp 转为 png
前端·javascript
白话1 小时前
Vue2批量生成二维码并下载
javascript·html
OpenTiny社区1 小时前
直播分享|从零开始读懂TinyEngine代码结构,理清设计意图
前端·vue.js·github