vue 搜索文本让搜索的字体高亮显示

news/2025/2/22 16:19:13

首先用到了ant design html" title=vue>vue的折叠板replace方法(replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。)
这个折叠组件的hander支持字符串写法,支持solt写法。现在用的是solt写法,字符串写法就直接hander=‘item.name’

html"> <a-collapse accordion @change="changePanel" activeKey="activeKey">
   <a-collapse-panel>
     v-for="(item, index) in examineContent"
     :key="index"
     :hander='item.name'
     :extra="`包含检查内容${item.contentCount}项`"
   	</a-collapse-panel>
   </a-collapse>
   /**这个是solt写法*/
 <template slot="header">
   <span v-html="item.name">
     {{item.name}}
   </span>
 </template>

接下来就是方法了,在搜索的时候把需要你搜索的值高亮(比如你搜索的是安全,如果折叠面板的hander里面的内容是安全生产放第一,那么安全这俩个字就高亮显示)

// 这个就是我需要替换的文本,this.project就是你input搜索框搜索的值,比如搜索安全
var patt1 = new RegExp(this.project);
// patt1打印出来的值/安全/
this.examineContent.map(examineItem => {
/** 这儿把整个数据循环一下,然后让他每一项的name用replace的方法给转换一下
`<span style='color: red'>${this.project}</span>`用的es6模板字符串,转换以后然后再把每一项的转换好的值赋值给他的每一项,html用v-html写,要不然会把标签也显示出来。*/
// patt1就是你即将要替换的文本,第二个参数就是你需要替换的文本
  examineItem.name = examineItem.name.replace(patt1,`<span style='color: red'>${this.project}</span>`)
  });

再次提醒html一定要用v-html写,要不然会渲染出来标签,转换以后一定要把转换以后的值赋给当前的值。


http://www.niftyadmin.cn/n/763855.html

相关文章

用python的五种方式_Python 操作 MySQL 的5种方式(转)

不管你是做数据分析&#xff0c;还是网络爬虫&#xff0c;Web 开发、亦或是机器学习&#xff0c;你都离不开要和数据库打交道&#xff0c;而 MySQL 又是最流行的一种数据库&#xff0c;这篇文章介绍 Python 操作 MySQL 的5种方式&#xff0c;你可以在实际开发过程中根据实际情况…

ant design vue树结构的expand和select的方法

你想点击第一个不做一些事件做正则判断 let reg /^0-[0-99999]$/;let isTrue reg.test(e.node.pos);点击第一个不展示数据&#xff0c;点击第二层展示数据

scapy python_Python scapy模块个人见解

scapy模块 from scapy.all import * //来自scapy.all文件&#xff0c;导入所有函数 python交互模式中&#xff1a;ls&#xff08;*&#xff09;*Ether、IP、ICMP、TCP、UDP、ARP 等等,查看可以配置的参数 1.构建包&#xff1a;不同层之间用/分隔&#xff08;常用&#xf…

jeecg实现点击按钮跳转路由url后面跟参数

this.$router.push({name: planEstablish-SisSecureItemList, // 去 planEstablish 文件夹下寻找 SisSecureItemList组件query: { // 路由携带参数name: 小明,sex: 男,age: 22} });到跳转的另一个页面获取 created () {this.handelUrl() }handelUrl () {this.urlId this.$ro…

java天气预报_100个Java练手项目,拿去练手,不谢

多年以后&#xff0c;你已经是一名技术总监&#xff0c;有一个美丽的妻子&#xff0c;两个孩子&#xff1b;你已经拥有了现在的你想都不敢想的一切&#xff1b;那时&#xff0c;你也一定会忘记&#xff0c;今天这篇教程&#xff0c;如同一颗石子&#xff0c;铺就过你前进的路。…

vue报错Error in render: “TypeError: Cannot read property ‘0‘ of undefined“

报这错是因为在你刚打开页面的时候&#xff0c;还没获取到这个值&#xff0c;因为这个值是请求过来的&#xff0c;但是可以正常渲染&#xff0c;控制台报错&#xff0c;因为这个结构data里面是个对象&#xff0c;对象里面的数组刚开始没有&#xff0c;所以就没有。 data () {r…

一样的代码为什么一关闭调试就报错一打开就好了_一分钟学会用Apple敲写C语言代码...

本文介绍的是Xcode使用教程详细讲解&#xff0c;Xcode是一个款强大的IDE开发环境&#xff0c;就像你在写Windows程序时需要VS2005一样需要要Xcode为你写Mac程序提供环境Xcode使用教程详细讲解是本文要介绍的内容&#xff0c;Xcode是一个款强大的IDE开发环境&#xff0c;就像你在…

vue 使用let和data的区别

为什么在vue的data中定义一个数组&#xff0c;就可以把每次点击获取到的值一一push进去&#xff0c;用let定义一个数组&#xff0c;就不可以。也许是因为let的特性吧&#xff0c;每次都会是一个最新的。 data里是这样的 在用let push 的时候每次都是最新的