如何使VuetifyJS中数据表的扩展槽中的内容可搜索？

Question

我正在使用带有扩展槽的VuetifyJS/VueJS 数据表。如何使扩展槽中的内容可搜索？我尝试将内容包装在其中，但这没有用。<td></td>

这是一个代码笔示例：https://codepen.io/anon/pen/VBemRK?&editors=101 如果您搜索“找到我”，它总是会导致一个Your search for "find me" found no results.

      <v-data-table
    :headers="headers"
    :items="desserts"
    :search="search"
    item-key="name"
  >

<template slot="items" slot-scope="props">
  <tr @click="props.expanded = !props.expanded">
      <td>{{ props.item.name }}</td>
      <td class="text-xs-right">{{ props.item.calories }}</td>
      <td class="text-xs-right">{{ props.item.fat }}</td>
      <td class="text-xs-right">{{ props.item.carbs }}</td>
      <td class="text-xs-right">{{ props.item.protein }}</td>
      <td class="text-xs-right">{{ props.item.iron }}</td>
    </template>

     <template slot="expand" slot-scope="props">
  <v-card flat>
    <v-card-text><td>Peek-a-boo! Please find me too.</td></v-card-text>
  </v-card>
         </template> 

    <v-alert slot="no-results" :value="true" color="error" icon="warning">
      Your search for "{{ search }}" found no results.
    </v-alert>
  </v-data-table>

Answer 1

使用自定义过滤器。

首先，创建一个自定义过滤器方法：

methods: {
    customFilter(items, search) {
      return items.filter(dessert => JSON.stringify(dessert).toLowerCase().indexOf(search.toLowerCase()) !== -1)
    }
}

然后添加:custom-filter="customFilter"到v-data-table：

<v-data-table
    :headers="headers"
    :custom-filter="customFilter"
    :items="desserts"
    :search="search"
    item-key="name"
>

请参阅此更新的代码笔：https ://codepen.io/WisdomSky/pen/PBNvYY