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

Question

我正在使用 VuetifyJS/VueJS data table用 expand slot .如何使扩展槽中的内容可搜索？我尝试将内容包装在 <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