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

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

 <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写，要不然会渲染出来标签，转换以后一定要把转换以后的值赋给当前的值。