vue实现文字检索时将搜索内容标红功能

小鱼儿心语：态度决定了人的命运。我们在面临考试的时候，一定要以一个平常心来面对。考试只是对自己的检测，测试一下自己还有哪些方面没有掌握好，所以大可不必紧张，过度的紧张反而会影响的自己的成绩。

    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px" style="margin-left: 20px;" @submit.native.prevent>
                  <el-form-item prop="year">
                    <el-input
                        v-model="queryParams.content"
                        placeholder="请输入标准内容"
                        clearable
                        @keyup.enter="handleQuery"
                        @change="handleQuery"
                    >
                    <template #prepend>标准内容</template>
                    </el-input>
                  </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="bznrList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
              <el-table-column label="编号" align="center" prop="number" />
              //  注意：要实用v-html展示
              <el-table-column label="标准" align="center" prop="content" width="250">
                <template #default="scope">
                      <span v-html="scope.row.content"></span>
                </template>
              </el-table-column>
    </el-table>
    <pagination
        v-show="total>0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />
<script setup name="Bznr">
  const { proxy } = getCurrentInstance();
  const bznrList = ref([]);
  /** 查询质量标准化列表 */
  function getList() {
    loading.value = true;
    listBznr(queryParams.value).then(response => {
      bznrList.value = response.rows;
      bznrList.value.forEach(item =>{
        if (item.content.indexOf(queryParams.value.content) != -1) {
            item.content = replaceAll(
            item.content,
            queryParams.value.content,
            `<span style="color:#e32a2a">` + queryParams.value.content + `</span>`,
          )
        }
      })
      total.value = response.total;
      loading.value = false;
    });
  }
</script>

小小的功能，简简单单的记录，方便自己同时希望能够帮助到大家~~_///(^v^)\~~