element ui 搜索框中搜索关键字标红展示

示例如图
在这里插入图片描述

el-select上绑定remote-method属性

 <el-select v-model="checkForm.type" filterable remote reserve-keyword :remote-method="remoteMethod" :loading="loading"><el-option v-for="item in options" :key="item.value" :value="item.value"><span v-html="item.text"></span></el-option></el-select>

定义remoteMethod方法

interface ListItem {value: stringlabel: string,text: string
}
const options = ref<ListItem[]>([])
const list = ref([{value:'123',label:'123',text:''
},{value:'125',label:'125',text:''
}])const remoteMethod =  (query) => {if (query) {loading.value = truesetTimeout(() => {loading.value = falselist.value.forEach(item => {if(item.value.indexOf(query)>=0){var val = item.value.split(query)item.text = val.join('<span style="color:red">' + query + "</span>")}})options.value = list.value}, 1000)} else {options.value = []}
}

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

华为Mate 70临近上市:代理IP与抢购攻略

随着科技的飞速发展&#xff0c;智能手机已经成为我们日常生活中不可或缺的一部分。而在众多智能手机品牌中&#xff0c;华为一直以其卓越的技术和创新力引领着行业的发展。近日&#xff0c;华为Mate 70系列手机的发布会正式定档在11月26日&#xff0c;这一消息引发了众多科技爱…

《Java核心技术 卷I》用户界面中首选项API

首选项API 在桌面程序中&#xff0c;通常都会存储用户首选项&#xff0c;如用户最后处理的文件、窗口的最后位置等。 利用Properties类可以很容易的加载和保存程序的配置信息&#xff0c;但有以下缺点&#xff1a; 有些操作系统没有主目录概念&#xff0c;很难为匹配文件找到…

win10海量文件拷贝的方法

文章目录 win10海量文件拷贝的方法概述笔记备注拷贝失败的情况记录杀毒软件拦截 是否要开启"发生错误继续"的选项还是不要开启"完美校验"可以勾选"错误时继续"选项"完美校验"太占用时间了备注日志是混合编码的总结END win10海量文件拷…

Linux——环境基础开发工具使用1

目录 1.软件包管理器 1.1 操作生态系统 1.2 yum具体操作 2.编辑器Vim 2.1 vim初识 2.2 vim的基本概念 2.3 vim的基本操作 2.3.1 命令模式 2.3.2 插入模式 2.3.3 底行模式 2.3.4 补充 3.编译器gcc/g 3.1 背景知识 3.1.1 预处理&#xff08;进行宏替换/去注释/…

自定义菜单栏实现点击添加按钮打开渲染进程的Dialog.vue模态框

实现思路&#xff1a;渲染进程页面初始化后就通知主进程&#xff0c;然后把event事件保存在该js文件外&#xff0c;当点击添加时因为是在其他位置&#xff0c;所以才要这样使用。然后点击添加后由主进程主动向渲染进程传递参数通知要做的操作。 代码如下&#xff1a; // 第一步…

[vulnhub] Chronos: 1

https://www.vulnhub.com/entry/chronos-1,735/ ps&#xff1a;该靶机需要在hosts文件添加chronos.local记录&#xff0c;在官方地址上没有写 主机发现端口扫描 使用nmap扫描网段类存活主机 因为靶机是我最后添加的&#xff0c;所以靶机IP是7 &#xff0c;kali是10 nmap -sP 1…

基于SSM的餐饮管理系统的设计与实现

【Java】基于SSM的餐饮管理系统的设计与实现 点击以下链接获取源码&#xff1a; https://download.csdn.net/download/qq_64505944/90001206?spm1001.2014.3001.5503 2、技术框架&#xff1a;Jdk1.8&#xff0c;SSM&#xff0c;Tomcat&#xff0c;Mysql5&#xff0c;Jsp 3、压…

数据结构之集合框架

文章目录 1.什么是集合框架2. 集合框架的重要性&#xff08;了解&#xff09;3. 背后涉及到的数据结构以及算法3.1 什么是数据结构3.2 相关Java知识3.3 什么是算法 1.什么是集合框架 Java 集合框架 Java Collection Framework &#xff0c;又被称为容器 container &#xff0c…

【大语言模型】ACL2024论文-14 任务:不可能的语言模型

【大语言模型】ACL2024论文-14 任务&#xff1a;不可能的语言模型 目录 文章目录 【大语言模型】ACL2024论文-14 任务&#xff1a;不可能的语言模型目录摘要研究背景问题与挑战如何解决创新点算法模型实验效果重要数据与结论推荐阅读指数和推荐理由 后记 任务&#xff1a;不可能…

PFC(Priority-based Flow Control) 的 100 种优化方法

简单直接的东西不需要优化&#xff0c;只有弄巧成拙的东西才不断被修补&#xff0c;优化&#xff0c;没完没了。 昨天聊 RDMA 和无损网络&#xff0c;我还是一如既往喷 PFC&#xff0c;并提出一些等价想法&#xff0c;被怼异想天开。随后我换了群昵称和头像&#xff0c;若干分…

【网络】什么是路由器 (Router )网关设备(Gateway)?

路由器&#xff08;Router&#xff09;&#xff0c;又称路径器或网关设备&#xff08;Gateway&#xff09;&#xff0c;是一种重要的计算机网络设备。以下是关于路由器的详细解释&#xff1a; 一、路由器的定义与功能 定义&#xff1a;路由器是连接因特网中各局域网、广域网的…

Linux debian系统安装ClamTk开源图形用户界面(GUI)杀毒软件

一、ClamTk简介 ClamTk 是一个基于 ClamAV 的开源图形用户界面&#xff08;GUI&#xff09;杀毒软件。它使用 GTK2-Perl 脚本构建而成&#xff0c;支持32位与64位操作系统。ClamTk 提供了一个直观的用户界面&#xff0c;使得用户无需深入了解命令行即可完成大部分操作。它具备…

Java期末复习暨学校第八次上机课作业

Java期末复习暨学校第八次上机课作业&#xff1a; 第一题&#xff1a; 分别给出了一个无参构造方法和有参构造方法&#xff0c;然后针对半径给出了set和get方法。针对面积给出了getArea方法&#xff0c;返回面积的值。 针对周长给出getPerimeter方法&#xff0c;返回周长。最后…

ShardingSphere如何轻松驾驭Seata柔性分布式事务?

0 前文 上一文解析了 ShardingSphere 强一致性事务支持 XAShardingTransactionManager &#xff0c;本文继续&#xff1a; 讲解该类介绍支持柔性事务的 SeataATShardingTransactionManager sharding-transaction-xa-core中关于 XAShardingTransactionManager&#xff0c;本文…

将 SQL 数据库连接到云:PostgreSQL、MySQL、SQLite 和云集成说明

在当今数据驱动型世界中&#xff0c;云技术已经完全改变了数据库的管理和扩展。SQL 数据库&#xff08;包括 PostgreSQL、MySQL 和 SQLite&#xff09;在相当长的一段时间内一直是开发人员的最爱。然而&#xff0c;为了响应对可扩展、适应性强且经济高效的解决方案日益增长的需…

Vulnhub靶场案例渗透[10]- Momentum2

文章目录 一、靶场搭建1. 靶场描述2. 下载靶机环境3. 靶场搭建 二、渗透靶场1. 确定靶机IP2. 探测靶场开放端口及对应服务3. 扫描网络目录结构4. 代码审计5. 反弹shell6. 提权 一、靶场搭建 1. 靶场描述 - Difficulty : medium - Keywords : curl, bash, code reviewThis wor…

STM32设计防丢防摔智能行李箱

目录 目录 前言 一、本设计主要实现哪些很“开门”功能&#xff1f; 二、电路设计原理图 1.电路图采用Altium Designer进行设计&#xff1a; 2.实物展示图片 三、程序源代码设计 四、获取资料内容 前言 随着科技的不断发展&#xff0c;嵌入式系统、物联网技术、智能设备…

前后端请求响应

引入 在之前的例子中&#xff0c;我们编写了一个简单的web类&#xff0c;我们运行启动类&#xff0c;启动内嵌的tomcat后就可以在浏览器通过特定的路径访问tomcat中的应用程序。 但之前编写的程序仅仅是个简单的java类&#xff0c;其并未实现某个接口或继承某个类&…

爬虫——数据解析与提取

第二节&#xff1a;数据解析与提取 在网络爬虫开发中&#xff0c;获取网页内容&#xff08;HTML&#xff09;是第一步&#xff0c;但从这些内容中提取有用的数据&#xff0c;才是爬虫的核心部分。HTML文档通常结构复杂且充满冗余信息&#xff0c;因此我们需要使用高效的解析工…

数据结构C语言描述3(图文结合)--双链表、循环链表、约瑟夫环问题

前言 这个专栏将会用纯C实现常用的数据结构和简单的算法&#xff1b;有C基础即可跟着学习&#xff0c;代码均可运行&#xff1b;准备考研的也可跟着写&#xff0c;个人感觉&#xff0c;如果时间充裕&#xff0c;手写一遍比看书、刷题管用很多&#xff0c;这也是本人采用纯C语言…