当前位置：首页 > news >正文

基于elementui的远程搜索下拉选择分页组件

news 来源：原创 2025/7/1 16:49:30

在开发一个练手项目的时候，需要一个远程搜索的下拉选择组件；
elementui自带的el-select支持远程搜索；但如果一次性查询的数据过多；会导致卡顿。故自己实现一个可分页的远程下拉选择组件
效果：
在这里插入图片描述
代码：

<template><el-selectv-model="selectedValue"filterableremotereserve-keywordplaceholder="请输入关键词":remote-method="remoteSearch":loading="loading"@change="handleChange"@focus="handleFocus"@clear="handleClear"clearable><el-optionv-for="item in options":key="item[keyField]":label="item[labelField]":value="item[valueField]"/><div class="select-footer" v-if="total > 0"><div class="total-count">共 {{ total }} 条</div><div class="select-pagination" v-if="total > pageSize"><el-paginationsmalllayout="prev, pager, next":total="total":page-size="pageSize":current-page.sync="currentPage"@current-change="handlePageChange"/></div></div></el-select>
</template><script>
import request from '@/utils/request'export default {name: 'RemoteSearchSelect',props: {value: {type: [String, Number],default: ''},apiUrl: {type: String,required: true},// 自定义字段映射labelField: {type: String,default: 'label'},valueField: {type: String,default: 'value'},keyField: {type: String,default: 'id'},// 请求参数自定义searchParamName: {type: String,default: 'keyword'},pageParamName: {type: String,default: 'pageNum'},pageSizeParamName: {type: String,default: 'pageSize'},// 响应数据结构配置responseListField: {type: String,default: 'list'},responseTotalField: {type: String,default: 'total'},// 额外的请求参数extraParams: {type: Object,default: () => ({})}},data() {return {selectedValue: this.value,options: [],loading: false,currentPage: 1,pageSize: 10,total: 0,keyword: '',isFirstFocus: true,selectedOption: null}},created() {this.remoteSearch('');},methods: {async remoteSearch(query) {this.loading = truethis.keyword = querytry {const params = {[this.searchParamName]: query,[this.pageParamName]: this.currentPage,[this.pageSizeParamName]: this.pageSize,...this.extraParams}// 使用配置的响应数据字段const responseData = await request({url: this.apiUrl,method: 'post',data: params})this.options = responseData[this.responseListField] || []this.total = responseData[this.responseTotalField] || 0} catch (error) {console.error('搜索出错：', error)this.$message.error('搜索失败，请重试')} finally {this.loading = false}},handleChange(value) {this.selectedOption = this.options.find(item => item[this.valueField] === value)this.$emit('input', value)this.$emit('change', value)this.$emit('select', this.selectedOption)},handleFocus() {// 如果是首次点击或当前没有选项，则执行搜索this.remoteSearch(this.keyword)this.isFirstFocus = false},handleClear() {this.selectedValue = ''this.keyword = ''this.selectedOption = nullthis.$emit('input', '')this.$emit('change', '')this.$emit('select', null)this.remoteSearch('')},async handlePageChange(page) {this.currentPage = pageif (this.keyword) {await this.remoteSearch(this.keyword)}}},watch: {value: {handler(newVal) {this.selectedValue = newVal},immediate: true}}
}
</script><style scoped>
.select-footer {padding: 8px;border-top: 1px solid #EBEEF5;display: flex;align-items: center;justify-content: space-between;
}.total-count {color: #909399;font-size: 12px;padding-left: 8px;
}:deep(.el-pagination) {padding: 0;margin-left: 8px;
}
</style>

用法

<remote-search-selectv-model="assignForm.ownerId"api-url="remoteUrl"label-field="label"value-field="value"key-field="id"search-param-name="childName"response-list-field="rows"response-total-field="total"@select="handleProxyerSelectChange"/>

参数介绍：

参数	说明
v-model	绑定的data数据
api-url	远程查询的数据接口路径，方法名，请求方式为post
label-field	需要展示的名称属性名
value-field	下拉值的属性名
key-field	主键的属性名
search-param-name	模糊搜索的参数的字段名
response-list-field	返回list的属性名
response-total-field	返回list的总数的属性名
@select	funtion，接收选中的值

组件可根据自己的具体需求做源码修改。

基于elementui的远程搜索下拉选择分页组件

在开发一个练手项目的时候，需要一个远程搜索的下拉选择组件； elementui自带的el-select支持远程搜索；但如果一次性查询的数据过多；会导致卡顿。故自己实现一个可分页的远程下拉选择组件效果： 代码： <…...

编程日记 2025/7/1 16:49:30

LCR 074. 合并区间对遍历顺序注意一下就可以 class Solution { public:vector<vector<int>> merge(vector<vector<int>>& intervals) {int n intervals.size();sort(intervals.begin(),intervals.end());int idx 0;vector<vector<int&g…...

编程日记 2025/6/28 21:26:17

Flink SQL

Overview | Apache Flink FlinkSQL开发步骤 Concepts & Common API | Apache Flink 添加依赖： <dependency><groupId>org.apache.flink</groupId><artifactId>flink-table-api-java-bridge_2.11</artifactId><version>…...

编程日记 2025/7/1 6:47:59

[免费]SpringBoot+Vue企业OA自动化办公管理系统【论文+源码+SQL脚本】

大家好，我是java1234_小锋老师，看到一个不错的SpringBootVue企业OA自动化办公管理系统，分享下哈。项目视频演示【免费】SpringBootVue企业OA自动化办公管理系统 Java毕业设计_哔哩哔哩_bilibili 项目介绍随着信息技术在管理上越来越深入…...

编程日记 2025/6/28 20:34:14

Linux下编译安装METIS

本文记录Linux下编译安装METIS的流程。零、环境操作系统Ubuntu 22.04.4 LTSVS Code1.92.1Git2.34.1GCC11.4.0CMake3.22.1 一、安装依赖 1.1 下载GKlib sudo apt-get install build-essential sudo apt-get install cmake 2.2 编译安装GKlib 下载GKlib代码， …...

编程日记 2025/6/30 20:32:26

LLM学习路径 - 渐进式构建知识体系

LLM学习路径 - 渐进式构建知识体系文章目录 LLM学习路径 - 渐进式构建知识体系一、模型算法基础二、机器学习三、深度学习四、自然语言处理 (NLP)五、大规模语言模型 (LLM) References 一、模型算法基础编程基础 Web 框架深入学习 Gradio 与 Streamlit，理解其构…...

编程日记 2025/7/1 16:38:56

使用Unity脚本模拟绳索、布料（碰撞）

效果演示： 脚本如下： using System.Collections; using System.Collections.Generic; using UnityEngine;namespace PhysicsLab {public class RopeSolver : MonoBehaviour {public Transform ParticlePrefab;public int Count 3;public int Space 1;…...

编程日记 2025/6/28 13:46:57

Qt Chart 模块化封装曲线图

一版本说明二完成示例此文章包含：曲线轴设置，曲线切换，单条曲线显示，坐标轴。。。三曲线图UI创建在UI界面拖放一个QWidget,然后在 Widget里面放一个 graphicsView 四代码介绍 1 头文件 #include <QString> #in…...

编程日记 2025/7/1 16:37:54

【Linux】深入理解进程管理与fork系统调用的实现原理

【Linux】深入理解进程管理与fork系统调用的实现原理进程基本概念描述进程-PCBtask_struct-PCB的一种task_ struct内容分类组织进程查看进程通过系统调用获取进程标示符Fork 之后的代码共享1. **代码共享**2. **数据段不共享**总结 🌏个人博客主页：个人…...

编程日记 2025/6/28 20:33:19

C语言程序设计P5-2【应用函数进行程序设计 | 第二节】——知识要点：函数的参数及返回值和函数的调用及声明

知识要点：函数的参数及返回值和函数的调用及声明视频： 目录一、任务分析二、必备知识与理论三、任务实施一、任务分析 1.求x的n次方的值也就是求n个x的乘积，可把x和n作为函数的形参，定义一个函数power来完成这个功能&am…...

编程日记 2025/6/28 21:27:56

【LeetCode】169.多数元素

题目连接： https://leetcode.cn/problems/majority-element/solutions/2362000/169-duo-shu-yuan-su-mo-er-tou-piao-qing-ledrh/?envTypestudy-plan-v2&envIdtop-interview-150 题目描述： 思路一： 使用哈希表unordered_map记录每个元…...

编程日记 2025/6/30 5:33:45

0x0118消息 WM_SYSTIMER

0x0118消息就是WM_SYSTIMER 编辑框出现输入光标时,产生的消息. 0x0118 would be the undocumented WM_SYSTIMER, which appears to be used for caret blinks. 0x0118是一个undocument 消息， 微软没有记录。但在一些库的源码中可以看到，比如ATL的库文…...

编程日记 2025/7/1 8:05:25

【Linux内核】Hello word程序

创建测试目录 mkdir -p ~/develop/kernel/hello-1 cd ~/develop/kernel/hello-1 创建MakeFile文件和内核.c文件 nano Makefile nano hello-1.c 编写内容 /* * hello-1.c - The simplest kernel module. */ #include <linux/module.h> /* Needed by all modules */…...

编程日记 2025/6/30 1:43:12

黑马redis

Redis的多IO线程只是用来处理网络请求的，对于读写操作命令Redis仍然使用单线程来处理 Redisson分布式锁实现15问文章目录主线程和IO线程是如何协作的Unix网络编程中的五种IO模型Linux世界一切皆文件生产上限制keys *、flushdb、flushall等危险命令keys * 遍历查询100W数据花…...

编程日记 2025/6/30 20:23:19

Robust Depth Enhancement via Polarization Prompt Fusion Tuning

paper：论文地址 code：github项目地址今天给大家分享一篇2024CVPR上的文章，文章是用偏振做提示学习，做深度估计的。模型架构图如下这篇博客不是讲这篇论文的内容，感兴趣的自己去看paper，主要是分享环境&…...

编程日记 2025/7/1 14:43:12

集合框架（3）Map

Map接口现实生活与开发中，我们常会看到这样的一类集合：用户ID与账户信息、学生姓名与考试成绩、IP地址与主机名等，这种一一对应的关系，就称作映射。Java提供了专门的集合框架用来存储这种映射关系的对象，即java.util…...

编程日记 2025/6/28 17:52:45

Java反射机制—Class

Java反射机制是指在运行时动态地获取类的信息以及操作类的成员变量、方法和构造方法的能力。反射机制通过使用Class类来实现，Class类是Java中表示类的类。通过反射机制，我们可以在运行时动态地创建对象、调用方法、访问属性等。反射机制提供了一种强大…...

编程日记 2025/6/28 20:33:22

C# 新语法中的字符串内插$和{}符号用法详解

自C#6.0开始提供一个新的语法糖，即"$" 符号，配合“{}”使用，它的作用除了是对String.format的简化，还可设置其格式模板，实现了对字符串的拼接优化。语法格式： $"string {变量表达式}” 语…...

编程日记 2025/6/28 20:34:54

WordPress 独立站是否需要 CDN：深度解析及必要性分析

WordPress 是目前全球最流行的开源内容管理系统（CMS），其易用性和丰富的插件生态使得它成为搭建独立站的首选。然而，随着流量的增加以及用户体验的需求，网站的速度和可靠性变得至关重要。在这种情况下，CDN&a…...

编程日记 2025/6/28 20:36:40

dell电脑开不了机怎么回事？戴尔电脑无法开机解决方法

dell戴尔电脑开不了机，这是很多使用dell电脑用户常遇到的问题。这种故障情况是由多种原因引起，包括硬件故障、软件问题或电源问题等等。dell电脑开不了机怎么办呢？下面便为大家介绍一下相关解决修复方法，帮助用户解决戴尔电脑无法…...

编程日记 2025/6/28 21:20:29

如何解决 JavaScript 中的数组方法不生效？

在 JavaScript 中，数组方法是常用的工具，可以用来对数组进行操作。常见的数组方法包括 push(), pop(), shift(), unshift(), map(), filter(), reduce() 等。然而，有时候我们会遇到数组方法“失效”或者不按预期工作的情况。这个问题的原因…...

编程日记 2025/6/30 1:09:42

道可云人工智能元宇宙每日资讯｜全国工商联人工智能委员会成立会议在南京举办

道可云元宇宙每日简报（2024年12月5日）讯，今日元宇宙新鲜事有： 全国工商联人工智能委员会成立会议在南京举办全国工商联人工智能委员会成立会议日前在江苏省南京市举办。中央统战部副部长、全国工商联党组书记沈莹出席会议并讲话…...

编程日记 2025/7/1 16:14:38

华为HCIP-Datacom H12-821H12-831 (12月最新题库)

备考HCIP-datacom的小伙伴注意啦 !!! 2024年下半年12月份最新(H12-821和H12-831)题库带解析,有需要的小伙伴移动至文章末 H12-821: H12-831: 1.BGP 邻居建立过程的状态存在以下几种：那么建立一个成功的连接所经历的状态机顺序是 A、3-1-2-5-4 B、1-3-5-2-4 C、…...

编程日记 2025/6/28 21:21:40

模型案例：| 手机识别模型！

导读 2023年以ChatGPT为代表的大语言模型横空出世，它的出现标志着自然语言处理领域取得了重大突破。它在文本生成、对话系统和语言理解等方面展现出了强大的能力，为人工智能技术的发展开辟了新的可能性。同时，人工智能技术正在进入各种应用领…...

编程日记 2025/6/28 21:25:54

AWS创建ec2实例并连接成功

aws创建ec2实例并连接 aws创建ec2并连接 1.ec2创建前准备首先创建一个VPC隔离云资源并且有公有子网 2.创建EC2实例 1.启动新实例或者创建实例 2.创建实例名 3.选择AMI使用linux(HVM) 4.选择实例类型 5.创建密钥对下载到本地并填入密钥对名称 6.选择自己创建的VPC和公有子网…...

编程日记 2025/7/1 3:31:35

短视频矩阵系统开发|技术源代码部署

短视频矩阵系统通过多账号运营管理、多平台视频智能分发等功能，助力企业实现视频引流、粉丝沉淀和转化。短视频矩阵系统是一种创新的营销工具，它整合了多账号管理、视频智能分发、数据可视化等多种功能，为企业在短视频领域的发展提供了强大…...

编程日记 2025/7/1 9:53:04

C# GDI绘制的小熊进度条

C# GDI小熊进度条 1、添加自定义控件winform using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms;…...

编程日记 2025/6/28 21:21:10

java书核心技术+卷一+4

5.4 对象包装器与自动装箱 package 反射; import java.util.AbstractList; import java.util.ArrayList; public class test {public static void main(String[] args) {int a10;ArrayList<Integer> xxnew ArrayList<>();xx.add(a); //自动装箱int bxx.get(0);//…...

编程日记 2025/6/28 21:28:06

用Python开发一个经典打砖块小游戏

Python 的 pygame 库让我们可以轻松开发经典的小游戏。今天，我们将实现一个“打砖块”小游戏，带你体验游戏开发的乐趣。一、游戏设计 1.1 游戏规则玩家通过移动滑板接住弹起的球。球撞击砖块会让砖块消失，玩家得分。如果球落地，游戏失败。1.2 技术点碰撞检测：检测球与…...

编程日记 2025/7/1 8:36:47

RTCMultiConnection 跨域问题解决

js套件地址 https://github.com/muaz-khan/RTCMultiConnection server套件地址 https://github.com/muaz-khan/RTCMultiConnection-Server 要解决的就是server代码的跨域问题原装写法： 解决写法： // 喜欢组合语法的自己组 const io new ioServer.S…...

编程日记 2025/6/28 21:35:29

使用GO--Swagger生成文档

概述在前后端分离的项目中，后端配置swagger可以很好的帮助前端人员了解后端接口参数和数据传输。go-swagger 是一个功能全面且高性能的Go语言实现工具包，用于处理Swagger 2.0（即OpenAPI 2.0）规范。它提供了丰富的工具集&#x…...

编程日记 2025/6/28 21:19:09

简易图书管理系统

javawebjspservlet 实体类 package com.ghx.entity;/*** author ：guo* date ：Created in 2024/12/6 10:13* description：* modified By：* version:*/ public class Book {private int id;private String name;private double pri…...

编程日记 2025/6/28 21:19:48

探索自然语言处理奥秘（NLP）

摘要自然语言处理（NLP）是人工智能领域的一个重要分支，它致力于使计算机能够理解、解释和生成人类语言。这项技术让机器能够阅读文本、听懂语音，并与人类进行基本的对话交流。通俗理解自然语言处理（NLP&#xff09…...

编程日记 2025/6/28 21:19:56

刘铁猛C#入门 030 泛型，partial类，枚举，结构

泛型(generic)无处不在为什么需要泛型：避免成员膨胀或者类型膨胀正交性：泛型类型(类/接口/委托/......)泛型成员(属性/方法/字段/....类型方法的参数推断泛型接口/类的类型参数不只有一个泛型与委托、lambda表达式实现泛型接口类时 ，实现…...

编程日记 2025/7/1 4:41:16

迅雷 11.2.2 | 本地会员版，不限速下载，支持云盘

迅雷 v11.2.2 是一款带网盘功能的绿色版下载工具。双击“!)绿化”文件即可在桌面生成快捷图标。该版本干净简洁，仅保留下载和云盘两项核心功能。点击左上角的【新建】按钮，可新建链接下载任务。即使在网络条件一般的情况下（如50M宽带&#xf…...

编程日记 2025/7/1 1:13:06

P3131 [USACO16JAN] Subsequences Summing to Sevens S

题目描述 Farmer Johns NN cows are standing in a row, as they have a tendency to do from time to time. Each cow is labeled with a distinct integer ID number so FJ can tell them apart. FJ would like to take a photo of a contiguous group of cows but, due to a…...

编程日记 2025/6/28 21:17:02

相关文章：