vue3使用el-autocomplete请求远程数据

服务器端

@RestController
@RequestMapping("/teacher")
public class TeacherController {@Resourceprivate TeacherService teacherService;@GetMapping({"/v1/getTop10TeacherByName/","/v1/getTop10TeacherByName/{name}"})public ResultBean<List<EntryBean>> getTop10TeacherByName(@PathVariable(value = "name",required = false) String name) {List<EntryBean> list = teacherService.getTop10TeacherByName(name);return ResultBeanUtil.success(list);}}

返回数据示例,比如请求:/teacher/v1/getgetTop10TeacherByName/大,返回数据:

[{"code": 200,"msg": "成功","data": [{"id": 2,"name": "史宇大"},{"id": 1,"name": "蔡大伟"},{"id": 3,"name": "秦大"}]}
]

vue页面

<template><div style="padding: 100px"><el-autocompletev-model="selectedName"value-key="name":fetch-suggestions="handleSearch"clearableplaceholder="请输入关键字"@select="handleSelect"/></div>
</template><script setup lang="ts">
import { getTop10TeacherByName } from "@/views/data/teacher/api/teacher";
import { onMounted, ref } from "vue";// 游戏
const selectedName = ref("");// 查询
const handleSearch = (queryString: string, callback: (args: EntryBean[]) => void) => {if (queryString) {getTop10TeacherByName({ name: queryString }).then(res => {console.log("从后台查询数据", res);if (res && res.code === 200 && res.data) {const results = queryString? res.data.filter(tmp => {return tmp.name.toLowerCase().indexOf(queryString.toLowerCase()) != -1;}): res.data;callback(results);}});}
};// 选择
const handleSelect = (item: EntryBean) => {console.log("用户选择的:", item.id, item.name);
};onMounted(() => {});
</script>

效果

请添加图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/6587.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

快速批量重命名文件(夹)

首先&#xff0c;需要用到的这个工具&#xff1a; 度娘网盘 提取码&#xff1a;qwu2 蓝奏云 提取码&#xff1a;2r1z 我这里处理这4个文本&#xff0c;实际可以处理任意数量的文本和文件夹 1、打开工具&#xff0c;进入文件批量复制版块 2、点击“重命名” 3、把要重命名的…

使用Python爬取淘宝商品并做数据分析

使用Python爬取淘宝商品并做数据分析&#xff0c;可以按照以下步骤进行操作&#xff1a; 确定需求&#xff1a;确定要爬取的淘宝商品的种类、数量、关键词等信息。 编写爬虫程序&#xff1a;使用Python编写爬虫程序&#xff0c;通过模拟浏览器请求&#xff0c;获取淘宝商品的页…

Docker 中的 Nginx 服务为什么要启用 HTTPS

一安装容器 1 安装docker-20.10.17 2 安装所需的依赖 sudo yum install -y yum-utils device-mapper-persistent-data lvm23 添加Docker官方仓库 sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo4 安装Docker CE 20.10.17 s…

python制作可执行文件(cython)

使用Cython将Python脚本编译成可执行文件涉及几个步骤。以下是一个基本的指南&#xff1a; 1. 安装Cython 首先&#xff0c;你需要安装Cython。你可以使用pip来安装&#xff1a; pip install cython 2. 编写Cython文件 通常&#xff0c;Cython源文件的后缀是.pyx。你可以将…

第182期 23ai:惊喜的全功能缓存True Cache-2安装部署(20240505)

数据库管理182期 2024-05-05 数据库管理-第182期 23ai:惊喜的全功能缓存True Cache-2安装部署&#xff08;20240505&#xff09;1 主机配置2 操作系统配置2.1 基础配置2.2 配置hosts2.3 安装preinstall RPM包2.4 创建目录2.5 配置环境变量 3 部署数据库3.1 部署DB软件3.2 创建监…

机器学习:基于K-近邻(KNN)、高斯贝叶斯(GaussianNB)、SVC、随机森林(RF)、梯度提升树(GBDT)对葡萄酒质量进行预测

前言 系列专栏&#xff1a;机器学习&#xff1a;高级应用与实践【项目实战100】【2024】✨︎ 在本专栏中不仅包含一些适合初学者的最新机器学习项目&#xff0c;每个项目都处理一组不同的问题&#xff0c;包括监督和无监督学习、分类、回归和聚类&#xff0c;而且涉及创建深度学…

linux上如何排查JVM内存过高?

怎么排查JVM内存过高&#xff1f; 前言&#xff1a; 想必工作一两年以后的同学都会逐渐面临到&#xff0c;jvm等问题&#xff0c;但是可能苦于无法熟练的使用一些工具&#xff1b;本文将介绍几个比较常用分析工具的使用方法&#xff0c;带着大家一步步定位分析问题。 1、top 查…

uni-app 从vue3项目创建到Pinia管理数据全局使用 持久化存储数据 详细教程

一、创建uni-app项目 1. 安装HBuilder X&#xff0c;下载地址&#xff1a;https://www.dcloud.io/hbuilderx.html 2. 打开HBuilder X&#xff0c;点击左上角的“文件”->“新建”->“项目”&#xff0c;选择“uni-app”项目模板&#xff0c;填写项目名称和项目路径&…

从 Word 文档中提取所有的有效 JSON 对象(包含跨段落)

文章目录 一、概述二、代码 一、概述 从 word 中提取所有有效 json &#xff08;包含跨段落的 json&#xff09;。 二、代码 """ 从 Word 文档中提取所有的 JSON 对象 """from docx import Document import jsondef extract_json_from_docx(d…

springmvc下

第二类初始化操作 multipartResolver应用 localeResolver应用 themeResolver应用 handlerMapping应用 handlerAdapter应用 handlerExceptionReslver requestToViewNameTranslator应用 viewResolver应用 flashMapManager应用 dispatcherServlet逻辑处理 processRequest处理web请…

目标跟踪—卡尔曼滤波

目标跟踪—卡尔曼滤波 卡尔曼滤波引入 滤波是将信号中特定波段频率滤除的操作&#xff0c;是抑制和防止干扰的一项重要措施。是根据观察某一随机过程的结果&#xff0c;对另一与之有关的随机过程进行估计的概率理论与方法。 历史上最早考虑的是维纳滤波&#xff0c;后来R.E.卡…

相差8小时:时区设置导致docker中的openGauss时间问题

文章目录 &#xff08;一&#xff09;问题&#xff08;二&#xff09;解决&#xff08;2.1&#xff09;确认服务器时间&#xff08;2.2&#xff09;确认和修改docker时间&#xff08;2.2.1&#xff09;失败的尝试&#xff08;2.2.2&#xff09;成功的尝试 &#xff08;2.2&…

OpenCV特征检测

1. 特征检测的基本概念 特征检测是计算机视觉和图像处理中的一个概念。它指的是使用计算机提取图像信息&#xff0c;决定每个图像的点是否属于一个图像特征。特征检测的结果是把图像上的点 分为不同的子集&#xff0c;这些子集往往属于孤立的点、连续的曲线或者连续的区域。 …

【C语言】分支和循环(上)

【C语言】分支和循环&#xff08;上&#xff09; 1、if语句1.2 else1.3分支中包含多条语句1.4嵌套if1.5悬空else问题 2、关系操作符3、条件操作符4、逻辑操作符&#xff1a;与、或、非&#xff08;取反&#xff09;&#xff08;&&&#xff0c;||&#xff0c;&#xff0…

小猪APP分发平台 – 掌握移动应用的推广新途径

在移动互联网高速发展的背景下小猪APP分发平台 – 掌握移动应用的推广新途径&#xff0c;app分发已成为开发者和企业关注的重点。小猪APP分发平台作为行业内的新星小猪APP分发平台 – 掌握移动应用的推广新途径&#xff0c;提供了一个创新且高效的方式帮助开发者推广他们的应用…

attr 与prop 的区别

在前端开发中&#xff0c;attr 和 prop 是两个常用的方法&#xff0c;用于操作 HTML 元素的属性和属性值。 它们之间的区别主要在于针对不同类型的属性操作。 attr&#xff08;&#xff09;&#xff1a; attr() 是 jQuery 中用来获取或设置 HTML 元素的属性的方法。它可以用于获…

ZOC8 for Mac v8.08.1激活版:卓越性能的SSH客户端

在远程连接和管理的世界中&#xff0c;ZOC8 for Mac以其卓越的性能和丰富的功能&#xff0c;成为了众多专业人士的首选SSH客户端。它支持SSH1、SSH2、Telnet、Rlogin、Serial等多种协议&#xff0c;让您轻松连接到远程服务器。ZOC8拥有简洁直观的界面和强大的功能设置&#xff…

SQL 基础 | JOIN 操作介绍

在SQL中&#xff0c;JOIN是一种强大的功能&#xff0c;用于将两个或多个表中的行结合起来&#xff0c;基于相关的列之间的关系。 JOIN操作通常用在SELECT语句中&#xff0c;以便从多个表中检索数据。 以下是几种基本的JOIN类型以及它们的用法&#xff1a; INNER JOIN&#xff1…

STM32 串口IDLE接收空闲中断+DMA

参考 http://t.csdnimg.cn/fAV38 1.基础知识 STM32 IDLE 接收空闲中断 功能&#xff1a; 在使用串口接受字符串时&#xff0c;可以使用空闲中断&#xff08;IDLEIE置1&#xff0c;即可使能空闲中断&#xff09;&#xff0c;这样在接收完一个字符串&#xff0c;进入空闲状态时&…

力扣39(组合总和)

解题思路&#xff1a;没有什么特殊的&#xff0c;按照递归三部曲确定返回值与参数&#xff0c;确定终止条件&#xff0c;确定单层循环的逻辑就可以解出来 代码实现&#xff1a; class Solution { public: vector<vector<int>>result; vector<int>path; vo…