vue中关键字搜索时内容高亮

 1.template里

<span style="font-weight:bolder" v-html="scope.row.docName"></span> //标题
<span class="demo-summary" v-html="scope.row.summary"></span> //内容

2.methods里

 getList() { //查询
        this.listLoading = true;
        this.$axios.posts("/api/Doc/Query",this.listQuery)
          .then((response) => {
            this.totalCount = response.result.totalCount || 0;
            this.changeColor(response.result.items);   //重点是这里
            this.listLoading = false;
          });
      },

        changeColor(resultsList) {
          resultsList.map((item, index) => {
            if (this.listQuery.tQuery) {
              // 匹配关键字正则
              let replaceReg = new RegExp(this.listQuery.tQuery, 'g')
              // 高亮替换v-html值
              let replaceString = '<span style="color: red;">' + this.listQuery.tQuery + '</span>'
              // 开始替换
              if (resultsList[index].docName || resultsList[index].summary) {
                resultsList[index].docName= item.docName.replace(replaceReg, replaceString)
                resultsList[index].summary= item.summary.replace(replaceReg, replaceString)
              }
            }
          })
          this.list = resultsList;
      },