vue实现搜索功能且关键字高亮(vue+vxe-table)

搜索效果如下

核心

1）利用@input属性来触发搜素功能

2）利用RegExp来对字符串来全局匹配关键字，利用replace方法来对匹配的关键字进行嵌入高亮的<vxe-table-column field="tern_name" type="html" title="问题" min-width="180"></vxe-table-column>表格，利用v-html来嵌入html标签来达到关键字高亮显示
　　
（动态渲染任意 HTML 是非常危险的，很容易导致 XSS 攻击，请确保内容是可信的）

代码

template

        <el-form>
          <!-- 筛选关键字 -->
          <el-form-item>
            <el-input v-model="filterForm.ternName" placeholder="请输入问题" size="mini" @input="getQuestionList()"></el-input>
          </el-form-item>
        </el-form>
        <vxe-table @cell-click="cellClickEvent" :loading="questionLoading" height="100%" ref="questionTermTable"
            border="inner" highlight-current-row resizable keep-source :data="resultList" :keyboard-config="{isTab: true,isArrow: true, isEnter: true}">
            <vxe-table-column field="term_type" align="center" title="类目名称" width="120" :formatter="termTypeFormatter"></vxe-table-column>
            <vxe-table-column field="tern_name" type="html" title="问题" min-width="180"></vxe-table-column>
            <vxe-table-column field="term_description" title="备注" width="140"></vxe-table-column>
        </vxe-table>

后端返回的data数据

{
   
    "code": 200,
    "msg": null,
    "data": {
   
        "list": [
            {
   
                "create_by": 50,
                "term_description": "",
                "del_flag": 0