如何在VueJS的v-data-table中高亮搜索结果

当然可以实现搜索关键词的高亮效果！我帮你基于现有的代码调整一下，只需要添加一个简单的处理方法和样式就能搞定。

步骤1：添加高亮处理方法 #

在你的组件的methods里新增两个方法：一个用来转义正则特殊字符（避免搜索词里包含. *这类字符时出错），另一个用来把匹配的关键词替换成带高亮样式的HTML片段：

methods: {
  // 转义正则表达式中的特殊字符
  escapeRegExp(str) {
    return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  },
  // 高亮处理搜索关键词
  highlightSearchTerm(text, searchTerm) {
    // 如果没有搜索词，直接返回原文本
    if (!searchTerm) return text;
    // 转义搜索词中的特殊字符
    const escapedTerm = this.escapeRegExp(searchTerm);
    // 创建不区分大小写的全局匹配正则
    const regex = new RegExp(escapedTerm, 'gi');
    // 把匹配到的内容用高亮span包裹
    return text.toString().replace(regex, match => `<span class="highlight">${match}</span>`);
  }
}

步骤2：定义高亮样式 #

在组件的<style>标签里添加高亮的样式（你可以根据自己的需求调整颜色和字体样式）：

.highlight {
  background-color: #ffeb3b;
  font-weight: 600;
}

步骤3：修改表格模板的渲染方式 #

把原来直接渲染文本的{{props.item[key]}}改成用v-html调用我们的高亮方法，这样就能解析带样式的HTML了：

<v-data-table :headers="headers" :items="rows" item-key="name" :search="search" >
  <template v-slot:item="props">
    <tr>
      <!-- 这里修改为v-html调用高亮方法 -->
      <td v-for="(prop, key) in props.item" :key="key" @click="onClickItem(key, props.item[key])" v-html="highlightSearchTerm(props.item[key], search)"></td>
      <td>
        <v-icon small @click="editItem(item)">mdi-pencil</v-icon>
      </td>
    </tr>
  </template>
  <template v-slot:top>
    <!-- 你的编辑对话框 -->
  </template>
  <template v-slot:item.actions="{ item }">
    <v-icon small class="mr-2" @click="editItem(item)">
      mdi-pencil
    </v-icon>
  </template>
</v-data-table>

这样调整之后，当你在搜索框输入关键词时，表格里所有匹配的内容都会自动高亮显示啦！如果需要区分大小写的匹配，只需要把正则表达式的'gi'改成'g'就可以了。

内容的提问来源于stack exchange，提问作者Sameer Pusegaonkar