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

我用的是带一个。如何使扩展槽中的内容可搜索？我尝试将内容包装在

中，但没有成功

下面是一个代码笔示例：

https://codepen.io/anon/pen/VBemRK?&editors=101

如果您搜索“find me”（查找我），它始终会导致

您搜索“find me”（查找我）时未找到任何结果。

      <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>

{{props.item.name}
{{props.item.carries}
{{props.item.fat}
{{props.item.carbs}
{{props.item.protein}
{{props.item.iron}
偷偷摸摸！请也找我。
您对“{search}}”的搜索未找到任何结果。

使用自定义过滤器

首先，创建一个自定义筛选方法：

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"
>

请参阅此更新的代码笔：

---

由于Vuetify version>=2，您需要使用具有新模式的

自定义过滤器

道具

export default {
  methods: {
    customDataTableItemsFilter(value, search, items) {
      /*
      Filter for individual words in search string. Filters
      all object values rather than just the keys included
      in the data table headers.
       */
      const wordArray = search
        .toString()
        .toLowerCase()
        .split(' ')
        .filter(x => x)
      return wordArray.every(word =>
        JSON.stringify(Object.values(items))
          .toString()
          .toLowerCase()
          .includes(word)
      )
    }
  }
}

---

我确认默认搜索筛选器将根据

deserts

变量中的字段，尝试查找正确的行。因为展开的文本没有出现在那里，所以您找不到它。我猜您可能需要将扩展文本添加到

甜点

行中，或者根据您的建议覆盖

过滤器

或

自定义过滤器

。我在

甜点

中添加了

文本

值，并更新了CodePen示例。搜索结果中仍然没有任何内容。如何使用自定义过滤器对行进行排序？如果可以，我会给你10+1，因为你的答案非常有用。谢谢你解开我的问题！我很高兴能为您提供帮助：）