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

element-plus中Autocomplete自动补全输入框组件的使用

news 来源：原创 2025/8/14 2:43:09

1.基本使用

①从官网复制如下代码

②查看运行效果

③代码解读

2.调用后端接口，动态获取建议数据

结语

1.基本使用

①从官网复制如下代码

<template>
<div><!-- 自动补全输入框 --><el-autocompletev-model="state":fetch-suggestions="querySearch":trigger-on-focus="false"clearablestyle="width:300px;"placeholder="请输入内容"@select="handleSelect"/></div>
</template><script setup>
import { onMounted, ref } from 'vue';//动态绑定自动补全输入框的值
const state = ref('');//存储建议列表的数据源，初始为空数组。
const restaurants = ref([]);//根据用户输入的内容（queryString）过滤建议列表。如果用户没有输入内容，则返回所有建议项。调用 cb(results) 将过滤后的结果传给 el-autocomplete 组件。
const querySearch = (queryString, cb) => {const results = queryString? restaurants.value.filter(createFilter(queryString)): restaurants.value;cb(results);
};//创建一个过滤器函数，用于匹配用户输入的内容。检查建议项的 value 是否以用户输入的内容开头（不区分大小写）。
const createFilter = (queryString) => {return (restaurant) => {return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;};
};//自定义函数loadAll，用来返回输入框自动补全时建议的数据
const loadAll = () => {//所有可能匹配的选项。（注意：每一个选项都是一个对象，构成这个对象数组）return [{ value: 'vue' },{ value: 'element' },{ value: 'cooking' },{ value: 'mint-ui' },{ value: 'vuex' },{ value: 'vue-router' },{ value: 'babel' },];
};//选中自动输入框的建议时，触发的事件
const handleSelect = (item) => {//item是我们选中的建议中的那个选项（是一个对象）alert(JSON.stringify(item));
};//element-plus组件加载完成后，调用 loadAll函数 初始化 restaurants 数据（我们可以在这个函数内，发送axios请求后端，获取数据，此时就不需要通过loadAll函数来获取数据了）
onMounted(() => {restaurants.value = loadAll();
});
</script><style scoped></style>

②查看运行效果

③代码解读

2.调用后端接口，动态获取建议数据

编写后端接口，返回一个对象数组：

修改js代码：

展示效果：

结语

以上就是element-plus中Autocomplete自动补全输入框组件的使用。

喜欢本篇文章的话，可以留个免费的关注~~

element-plus中Autocomplete自动补全输入框组件的使用

目录 1.基本使用 ①从官网复制如下代码 ②查看运行效果 ③代码解读 2.调用后端接口，动态获取建议数据结语 1.基本使用 ①从官网复制如下代码 <template> <div><el-autocompletev-model"state":fetc…...

编程日记 2025/8/14 2:43:09

【医学影像 AI】大型语言模型生成 ROP 患者信息材料的能力

【医学影像 AI】大型语言模型生成 ROP 患者信息材料的能力 0. 论文简介0.1 基本信息0.2 摘要 1. 引言2. 材料与方法2.1 大语言模型的使用2.2 可读性标准2.3 统计分析 3. 结果3.1 Bezirci-Yılmaz可读性评分3.2 Ateşman可读性评分3.3 全面性评分3.4 准确性评分 4. 讨论4.1 可读…...

编程日记 2025/8/10 16:38:17

（性能测试）性能测试工具 2.jmeter的环境搭建 3jmeter元件和4使用实例 5jmeter元件和参数化

目录性能测试工具性能测试工具 jemeter环境搭建 jmeter的常用目录介绍 jmeter修改语言和主题--jmeter界面的汉化 jmeter元件 jmeter元件和组件的介绍 jmeter的作用域原则 jmeter的执行顺序案例：执行顺序 jmeter使用案例 jmeter线程组的介绍 jmeter…...

编程日记 2025/8/14 2:41:42

Matlab 四分之一车体车辆半主动悬架鲁棒控制

1、内容简介略 Matlab 173-四分之一车体车辆半主动悬架鲁棒控制可以交流、咨询、答疑 2、内容说明略 3、仿真分析略 4、参考论文略...

编程日记 2025/8/14 2:41:52

Kafka可视化工具KafkaTool工具的使用

Kafka Tool工具介绍使用Kafka的小伙伴，有没有为无法直观地查看 Kafka 的 Topic 里的内容而发过愁呢？下面推荐给大家一款带有可视化页面的Kafka工具：Kafka Tool （目前最新版本是 3.0.2） 注意：以前叫Kafk…...

编程日记 2025/8/14 2:40:10

1. 在packagemanager添加插件 2. 在设置中进行初始化。 Edit > Project Settings > Visual Scripting Initialize Visual Scripting You must select Initialize Visual Scripting the first time you use Visual Scripting in a project. Initialize Visual Scripting …...

编程日记 2025/8/11 16:29:58

【Maven教程与实战案例】

文章目录前言一、Maven是什么？二、Maven的安装与配置1. 安装前置条件2. 下载与配置 Maven3. 验证安装三、Maven的核心概念1. POM.xml 文件2. 构建生命周期与插件机制四、实战项目示例1. 项目目录结构2. 编写代码App.javaAppTest.java 3. 构建项目4. 运行项目前言…...

编程日记 2025/8/12 9:22:55

Flask中使用with语句手动加载应用上下文

在 Flask 中，with app.app_context(): 手动加载应用上下文，使代码块可以访问 Flask 全局对象（如 current_app、g），即使代码不在请求中运行。 1. 为什么需要手动加载应用上下文？ 在 Flask 中，某…...

编程日记 2025/8/12 17:42:23

ROS实践（五）机器人自动导航（robot_navigation）

目录一、知识点 1. 定位 2. 路径规划（1）全局路径规划（2）局部路径规划 3. 避障二、常用工具和传感器三、相关功能包 1. move_base（决策规划） 2. amcl（定位） 3. costmap_2d（代价地图） 4. global_planner（全局规划器） 5. local_planner（局部规划器…...

编程日记 2025/8/10 6:12:57

【数学建模】层次分析法(AHP)详解及其应用

层次分析法(AHP)详解及其应用引言在现实生活和工作中，我们经常面临复杂的决策问题，这些问题通常涉及多个评价准则，且各准则之间可能存在相互影响。如何在这些复杂因素中做出合理的决策？层次分析法(Analytic Hierarchy Process…...

编程日记 2025/8/4 1:39:57

【大模型】Transformer、GPT1、GPT2、GPT3、BERT 的论文解析

前言在自然语言处理（NLP）和深度学习的快速发展中，Transformer模型和 GPT系列模型扮演了至关重要的角色。本篇博客旨在对这些开创性的论文进行介绍，涵盖它们的提出时间、网络结构等关键信息，能够快速的理解这些模型的设…...

编程日记 2025/8/13 4:04:27

Android 手机启动过程

梳理为了梳理思路，笔者画了一幅关于 Android 手机启动的过程图片内容纯属个人见解，如有错误，欢迎各位指正...

编程日记 2025/7/19 3:18:50

【redis】hash基本命令和内部编码

文章目录表示形式命令HSET 和 HGET HEXISTSHDELHKEYSHVALSHGETALLHMGETHLENHSETNXHINCRBYHINCRBYFLOAT命令小结内部编码表示形式 Redis 自身已经是键值对结构了 Redis 自身的键值对就是通过哈希的方式来组织的把 key 这一层组织完成之后，到了 value 这一层&…...

编程日记 2025/8/13 20:35:25

统计数字字符个数（信息学奥赛一本通-1129）

【题目描述】输入一行字符，统计出其中数字字符的个数。【输入】一行字符串，总长度不超过255。【输出】输出为1行，输出字符串里面数字字符的个数。【输入样例】 Peking University is set up at 1898. 【输出样例】 4 【输出样例】 #in…...

编程日记 2025/8/13 19:55:52

基于javaweb的SSM+Maven网上选课管理系统设计与实现(源码+文档+部署讲解）

技术范围：SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。主要内容：免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论…...

编程日记 2025/8/13 4:44:42

算法及数据结构系列 - BFS算法

文章目录框架思路经典题型111. 二叉树的最小深度752. 打开转盘锁框架思路 BFS 的核心思想应该不难理解的，就是把一些问题抽象成图，从一个点开始，向四周开始扩散。一般来说，我们写 BFS 算法都是用队列这种数据结构，每…...

编程日记 2025/8/14 2:43:08

深入剖析 MetaSpace OOM 问题：根因分析与高效解决策略

目录一、MetaSpace 区 OOM：概述 （一） MetaSpace的变革与挑战 （二）MetaSpace OOM的影响 （三） 为什么要关注MetaSpace OOM 二、MetaSpace 区 OOM的根本原因 （一）Met…...

编程日记 2025/8/13 16:12:03

java自带日志系统介绍（JUL）以及和Log4j 2、Logback、SLF4J不同日志工具的对比

Java 日志系统是开发中用于记录应用程序运行时信息的重要工具。以下是 Java 日志系统的核心组件及其使用场景、配置参数的详细介绍，以及不同日志系统的对比分析。 Java 日志系统核心组件 1. 日志记录器（Logger） 作用：负责生成日…...

编程日记 2025/8/14 2:40:09

Kubernetes 中metrics-server的采集周期，采集链路是什么样的？

0. 运维干货分享软考高级系统架构设计师备考学习资料软考高级网络规划设计师备考学习资料Kubernetes CKA认证学习资料分享信息安全管理体系（ISMS）制度模板分享免费文档翻译工具(支持word、pdf、ppt、excel)PuTTY中文版安装包MobaXterm中文版安装包ping…...

编程日记 2025/8/13 1:26:49

一分钟了解深度学习

一分钟了解深度学习 A Minute to Know About Deep Learning By JacksonML 1. 什么是深度学习？ 深度学习(Deep Learning) 是机器学习的一个子集，都属于人工智能的范畴；它使用多层神经网络（称为深度神经网络）来模拟人…...

编程日记 2025/8/11 2:55:01

Git LFS (Large File Storage) 简介

目录 Git LFS (Large File Storage) 简介 1. 什么是 Git LFS？ 2. 为什么需要 Git LFS？ 3. Git LFS 的工作原理 4. 如何使用 Git LFS？ 4.1 安装 Git LFS 4.2 配置 Git LFS 5. Git LFS 的优缺点优点缺点 6. 适用场景 7. 结论 1. …...

编程日记 2025/8/13 6:39:11

前端权限系统

前端权限系统是为了确保用户只能访问他们有权限查看的资源而设计的。在现代前端开发中，权限控制不仅仅是简单的显示或隐藏元素，还涉及到对路由、组件、数据和操作权限的细致控制。下面是前端权限系统的常见设计方案和实现步骤。前端权限系统的组成部分 …...

编程日记 2025/8/10 9:07:26

【蓝桥杯速成】| 4.递归

递归题目一：最大公约数问题描述 1979. 找出数组的最大公约数 - 力扣（LeetCode） 给你一个整数数组 nums ，返回数组中最大数和最小数的最大公约数。两个数的最大公约数是能够被两个数整除的最大正整数。解题步骤需要…...

编程日记 2025/8/13 21:06:55

QEMU源码全解析 —— 块设备虚拟化（4）

接前一篇文章：QEMU源码全解析 —— 块设备虚拟化（3）本文内容参考：《趣谈Linux操作系统》 —— 刘超，极客时间《QEMU/KVM源码解析与应用》 —— 李强，机械工业出版社类模板是创建类的模式_创建类是的模版-CSDN博客<...

编程日记 2025/7/22 20:24:22

92.HarmonyOS NEXT开发学习路径与最佳实践总结：构建高质量应用

温馨提示：本篇博客的详细代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦！ HarmonyOS NEXT开发学习路径与最佳实践总结：构建高质量应用文章目录 HarmonyOS NEXT开发学习路径与最佳实践总结：构建高质…...

编程日记 2025/8/13 1:03:30

【004】deepseek本地化部署后，python的调用方式_#py

python调用本地deepseek 1 本地化部署deepseek2 python调用方式 1 本地化部署deepseek 已经有很多大佬们说了不少部署本地化部署deepseek的工作了，我就不过多重复了。先安装Ollama软件，再通过Ollama获取deepseek的模型文件，大家根据电脑的配…...

编程日记 2025/8/14 2:41:51

基于Python+Flask+MySQL+HTML的爬取豆瓣电影top-250数据并进行可视化的数据可视化平台

FlaskMySQLHTML 项目采用前后端分离技术，包含完整的前端，以flask作为后端 Pyecharts、jieba进行前端图表展示通过MySQL收集格列数据通过Pyecharts制作数据图表这是博主b站发布的详细讲解，感兴趣的可以去观看：【Python爬虫可…...

编程日记 2025/8/13 15:26:20

【Prometheus01】可观测性系统之Prometheus简介、优缺点对比、组件介绍、数据采集流程、TSDB简介

监控工具对比、黑盒监控与盒白盒监控、Kubernetes监控简介监控简介： 监控的价值： 长期趋势分析：通过对监控样本数据的持续收集和统计，对监控指标进行长期趋势分析。例如，通过对磁盘空间增长率的判断，我们…...

编程日记 2025/8/7 20:03:29

Postman下载安装及简单入门

一．Postman简介 Postman是一款API测试工具，可以帮助开发、测试人员发送HTTP请求，与各种API进行交互，并分析响应二．下载与安装访问Postman官网（https://www.postman.com/），下载适…...

编程日记 2025/8/8 22:46:28

记第一次跟踪seatunnel的任务运行过程三——解析配置的具体方法getLogicalDag

前绪记第一次跟踪seatunnel的任务运行过程二——ClientJobExecutionEnvironment的execture方法从这里开始，就是使用seatunnel-2.3.9的源码了。前面部分没有变化，2.3.X版本都是通用的。建议打开源码，边读文章，边阅读源码正文…...

编程日记 2025/8/11 12:58:08

Maven 的核心包

由于前端项目不是核心，阅读 nexus-public 源代码似乎绕远路了。nexus-oss 社区版主要就是集成 maven 的上传包、认证、包解析、包存储这几个核心功能，前端实现重新可以使用新的现代前端工具来提高生产力。故重新疏理一下 maven 的核心机制，即…...

编程日记 2025/8/12 4:55:03

上位机数据可视化：使用QtCharts绘制波形图

工程配置 CMake文件 find_package(Qt5 COMPONENTS Charts REQUIRED)target_link_libraries(zhd-desktop PRIVATE Qt5::Charts)包含头文件以及名称空间（这个很重要，没有包含名称空间编译器会提示找不到相关的类型） #include <QtCharts&g…...

编程日记 2025/8/7 13:44:05

制造业数字化转型，汽车装备制造企业数字化转型案例，智能制造数字化传统制造业数字化制造业数字化转型案例

《某制造业企业信息化整体解决方案》PPT展示了一个汽车装备企业的整体信息化解决方案，阐述了该企业的业务特点和现状，主要包括按订单生产、多级计划和产品跟踪等，分析了信息化建设的主要困难，如信息管理手工化、过程数据追溯困难、…...

编程日记 2025/7/25 4:40:51

网络安全常识科普（百问百答）

汪乙己一到店，所有喝酒的人便都看着他笑，有的叫道，“汪乙己，你又监控员工隐私了！”他不回答，对柜里说，“来两个fofa。”便排出三个比特币。他们又故意的高声嚷道，“你一定又在电报群…...

编程日记 2025/8/12 21:23:01

P2512糖果传递 P4447分组 P1080国王游戏 P4053建筑抢修

P2512 [HAOI2008] 糖果传递题目描述有 n n n 个小朋友坐成一圈，每人有 a i a_i ai 个糖果。每人只能给左右两人传递糖果。每人每次传递一个糖果代价为 1 1 1。输入格式小朋友个数 n n n，下面 n n n 行 a i a_i ai。输出格式求使所…...

编程日记 2025/8/7 15:32:41

SpringMVC（七）数据校验+VO++脱敏

目录一基础原理 1 先将数据校验的依赖导入 2 在JavaBean中编写校验注解 3 使用Valid告诉SpringMVC进行校验（校验不通过，方法通知执行） 4 在Valid参数后面加上一个BindingResult参数，获取校验结果。二改进方案 1 没写全…...

编程日记 2025/8/8 17:37:05

使用OpenResty（基于Nginx和Lua）优化Web服务性能

引言 1.1 OpenResty简介 OpenResty 是一个基于 Nginx 和 Lua 的高性能 Web 应用平台。它通过将 Lua 脚本嵌入到 Nginx 中，提供了强大的动态处理能力，适用于构建高性能的 Web 服务、API 网关、动态内容生成等场景。 1.2 Nginx与Lua结合的优势高性能：Nginx 本身就是一个高…...

编程日记 2025/8/11 2:08:26

32、构造函数

1、用构造函数反复创建多个相同结果的对象问题如果想反复创建多个相同结构，但是内容不同的对象时，用{}创建会代码重复，及其不便于维护！ 解决今后只要想反复创建同一类型的多个相同结构不同内容的对象时，都用构造函…...

编程日记 2025/8/8 1:26:43

蓝桥与力扣刷题（蓝桥星期计算）

题目：已知今天是星期六，请问 20^22 天后是星期几? 注意用数字 1 到 7 表示星期一到星期日。本题为填空题，只需要算出结果后，在代码中使用输出语句将所填结果输出即可。解题思路＋代码： 代码&#xff1…...

编程日记 2025/8/13 4:20:05

【leetcode hot 100 230】二叉搜索树中第K小的元素

解法一：从小到大输出到list中，取list[k-1]就是第k小的元素 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int val) { this.val val;…...

编程日记 2025/8/12 20:57:42

六种最新优化算法（TOC、MSO、AE、DOA、GOA、OX）求解多个无人机协同路径规划（可以自定义无人机数量及起始点），MATLAB代码

一、算法简介 （一）阿尔法进化（Alpha Evolution，AE）算法阿尔法进化（Alpha Evolution，AE）算法是2024年提出的一种新型进化算法，其核心在于通过自适应基向量和随机步长的…...

编程日记 2025/8/13 1:30:27

python离线安装

Python Releases for Windows | Python.org 下载包地址widows一般是64bit的包下载完成后双击，在弹出的首个页面会看到下面的图第一步：建议手动安装第二步：一定要勾选把版本加入到Path路径然后就是无脑下一步，到这一步就可…...

编程日记 2025/8/12 12:09:55

【每日学点HarmonyOS Next知识】状态栏字体、生命周期、自定义对话框屏幕中间、透明度、tab居中

1、HarmonyOS 单页面如何控制状态栏字体颜色？ 状态栏字体颜色可通过设置statusBarContentColor修改，参考文档如下： https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5 参考代码： import…...

编程日记 2025/8/12 17:52:35

C# GeneticSharp包

可以直接从nuget安装GeneticSharp包 GeneticSharp 遗传算法类库 GeneticSharp 是什么 GeneticSharp 是一个C#的遗传算法类库, 遗传算法Java著名的JMetal, Python也有JMetalPy和PyMoo, C#相对差一截, 稍微有名的是GeneticSharp库. GeneticSharp 的弱点: 不支持多目标优化没…...

编程日记 2025/8/8 17:51:52

大模型中的常用名词介绍八：【特征与数据处理、伦理与公平性等】【建议收藏】

本文总结了大模型领域有关特征与数据处理、伦理与公平性等其他部分的名词，并解释其含义。跳出浩如烟海的大模型知识圈层，从概念上理清大模型的基础脉络！ 序号模块分组说明快捷访问1 模型架构与基础概念介绍了【模型架构与基础概念】相关的常…...

编程日记 2025/8/13 21:18:43

HTML5 drag API实现列表拖拽排序

拖拽API（Drag and Drop API）是HTML5提供的一组功能，使得在网页上实现拖放操作变得更加简单和强大。这个API允许开发者为网页元素添加拖拽功能，用户可以通过鼠标将元素拖动并放置到指定的目标区域。事件类型 dragstart&#xff1…...

编程日记 2025/8/1 21:53:49

HTTPS建立连接过程

一、混合加密通过混合加密的方式可以保证信息的机密性，解决了窃听的风险。 HTTPS采用的是对称加密和非对称加密结合的混合加密方式： （1） 在通信建立前采用非对称加密的方式交换会话密钥，后续就不再使用非对称加密。 &…...

编程日记 2025/8/14 1:59:35

deepseek GRPO算法保姆级讲解(数学原理+源码解析+案例实战)

文章目录什么是GRPO群组形成(Group Formation):让大模型创建多种解决方案偏好学习(Preference Learning)：让大模型理解何为好的解答组内相对优势优化(optimization): 让大模型从经验中学习(learning from experience)目标函数 GRPO算法的伪码表示GRPO算法的局限与…...

编程日记 2025/8/13 15:56:59

【WEB APIs】DOM-节点操作

1. 日期对象 1.1 实例化 <script>// 实例化// 1.得到当前时间const date new Date()console.log(date);// 2.得到指定时间const date1 new Date(2025-3-14)console.log((date1));</script> 1.2 日期对象方法千万不要忘记加小括号 // 获得日期对象const date2 …...

编程日记 2025/8/10 18:41:37

VSTO（C#）Excel开发7：自定义任务窗格

初级代码游戏的专栏介绍与文章目录-CSDN博客我的github：codetoys，所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。这些代码大部分以Linux为目标但部分代码是纯C的，可以在任何平台上使用。源码指引：github源…...

编程日记 2025/8/6 6:59:11

1.基本使用

①从官网复制如下代码

②查看运行效果

③代码解读

2.调用后端接口，动态获取建议数据

结语

相关文章：