vue实现文字检索时候将搜索内容高亮显示

程序员007007

已于 2024-10-08 16:50:40 修改

阅读量598

点赞数 3

文章标签： vue.js javascript 前端

于 2024-10-08 16:45:03 首次发布

本文链接：https://blog.youkuaiyun.com/qq_41816505/article/details/142763355

版权

效果如图：

①：找到字段在table显示的位置，加上这段代码这个方法highlightXmmc（参数1：显示内容，参数2：检索框输入的内容），一定要是v-html。

      <el-table-column prop="tbxm"  label="投标项目名称" width="300">
        <template slot-scope="scope">
          <el-link type="primary" v-for="(tbxm, index) in scope.row.tbxm.split(',')" :key="index">
            <a @click="toxm(index, scope.row.tbbh)"><div v-html="highlightXmmc(tbxm, queryParams.xmmc)"></div></a>

          </el-link>
        </template>
      </el-table-column>

②：在vue的 methods里面添加这个方法，代码如下：

    highlightXmmc(text, keyword) {
      console.log('keyword:',keyword);
      //为空的场合，不操作了
      if(!keyword){
        return text;
      }else{
        const regex = new RegExp(keyword, 'gi');
        const highlighted = text.replace(regex, match => {
          return `<span style="color: #0e0e0e;background-color: yellow">${match}</span>`;
        });
        return highlighted;
      }
    },