首先用到了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>`)
});