如何在 V-data-table 中突出显示搜索结果 - VueJS

Question

我有一个v-data-table有一些通用数据的。我想知道是否可以突出显示通过搜索单词获得的特定值？

我当前的代码很简单，其中一个片段如下所示。

编辑：我正在利用官方 vuetify 文档中的 CRUD-Actions 示例。https://vuetifyjs.com/en/components/data-tables/

<v-data-table 
    :headers="headers" 
    :items="rows" 
    item-key="name" 
    :search="search" >
    <template v-slot:item="props">
        <tr>
            <td v-for="(prop, key) in props.item" 
:key="key" @click="onClickItem(key, props.item[key])">{{props.item[key]}} 
           </td>
            <td>
                <v-icon small @click="editItem(item)">mdi-pencil</v-icon>
            </td>
        </tr>
    </template> 
    <template v-slot:top>
        <!-- A dailog box is present here to edit the rows-->                   
    </template>

    <template v-slot:item.actions="{ item }">
        <v-icon small class="mr-2" @click="editItem(item)">
            mdi-pencil
        </v-icon>
    </template>

</v-data-table>

谢谢！

Answer 1

您可以创建一个过滤器，例如：

filters: {
    highlight: function(value, query){
        return value.replace(new RegExp(query, "ig"), '<span class=\'blue\'>' + query + '</span>')
    }
},

然后在相应列的项目槽中使用它......

<template #item.address="{ value }">
     <div :inner-html.prop="value | highlight(search)">
     </div>
</template>

演示： https: //codeply.com/p/3CS7vssZqg