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

<template>
  <div>
    <v-text-field v-model="searchKeyword" label="Search"></v-text-field>
    <v-data-table
      :headers="headers"
      :items="items"
      :search="searchKeyword"
    ></v-data-table>
  </div>
</template>

<template>
  <div>
    <v-text-field v-model="searchKeyword" label="Search"></v-text-field>
    <v-data-table
      :headers="headers"
      :items="items"
      :search="searchKeyword"
    >
      <template v-slot:item="{ item }">
        <tr>
          <td v-for="(value, index) in item" :key="index">
            <span v-html="highlight(value)"></span>
          </td>
        </tr>
      </template>
    </v-data-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      headers: [
        { text: 'Name', value: 'name' },
        { text: 'Age', value: 'age' },
        // 添加其他表头
      ],
      items: [
        { name: 'John Doe', age: 30 },
        { name: 'Jane Smith', age: 25 },
        // 添加其他数据项
      ]
    };
  },
  methods: {
    highlight(value) {
      if (this.searchKeyword && value) {
        const regex = new RegExp(this.searchKeyword, 'gi');
        return value.toString().replace(regex, match => `<b>${match}</b>`);
      }
      return value;
    }
  }
};
</script>