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

news/2024/11/22 1:31:34/

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

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.ppmy.cn/news/1548902.html

相关文章

VRT: 关于视频修复的模型

&#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;编程探索专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年11月15日14点34分 神秘男子影, 秘而不宣藏。 泣意深不见, 男子自持重, 子夜独自沉。 论文链接 点击开启你的论文编程之旅…

用 Python 与 Turtle 创作属于你的“冰墩墩”!

用 Python 与 Turtle 创作属于你的“冰墩墩”&#xff01; &#x1f980; 前言 &#x1f980;&#x1f41e;往期绘画&#x1f41e;&#x1f40b; 效果图 &#x1f40b;&#x1f409; 代码 &#x1f409; &#x1f980; 前言 &#x1f980; 冰墩墩是2022年北京冬季奥林匹克运动会…

微店商品详情 API 接口如何获取

要获取微店商品详情API接口&#xff0c;你需要遵循以下步骤&#xff1a; 注册与认证&#xff1a;首先&#xff0c;你需要在微店平台完成注册&#xff0c;并进行必要的认证流程&#xff0c;以确保具备获取API接口的资格。 深入研究政策&#xff1a;仔细阅读并理解微店关于API使…

Angular中的ngOnchange()的汇总

ngOnChanges() 是 Angular 中的一个生命周期钩子函数&#xff0c;它在组件或指令的 输入属性&#xff08;Input()&#xff09;发生变化时被调用。这个钩子可以帮助你检测输入数据的变化&#xff0c;并对数据变化做出反应。 1.监听的对象 ngOnChanges() 监听的是 通过 Input() …

BERT--公认的里程碑

前言 如果说&#xff0c;让我选Transformer架构的哪个模型最深入人心&#xff0c;我将毫不犹豫的选择BERT&#xff01; BERT 的意义在于&#xff0c;从大量无标记的数据集中训练得到的深度模型&#xff0c;可以限制提高各项自然语言处理任务的准确率。 BERT 在当时&#xff0…

vitepress博客模板搭建

vitepress博客搭建 个人博客技术栈更新&#xff0c;快速搭建一个vitepress自定义博客 建议去博客查看文章&#xff0c;观感更佳。原文地址 模板仓库&#xff1a; vitepress-blog-template 前言 服务器过期快一年了&#xff0c;博客也快一年没更新了&#xff0c;最近重新搭…

浪潮云启操作系统(InLinux) bcache宕机问题分析

前言 本文以一次真实的内核宕机问题为切入点&#xff0c;结合实际操作案例&#xff0c;详细展示了如何利用工具 crash对内核转储&#xff08;kdump&#xff09;进行深入分析和调试的方法。通过对崩溃日志的解读、函数调用栈的梳理、关键地址的定位以及代码逻辑的排查&#xff…

Thinkphp6视图介绍

一.MVC MVC 软件系统分为三个基本部分&#xff1a;模型&#xff08;Model&#xff09;、视图&#xff08;View&#xff09;和控制器&#xff08;Controller&#xff09; ThinkPHP6 是一个典型的 MVC 架构 控制器—控制器&#xff0c;用于将用户请求转发给相应的Model进行处理&a…